JQuery - Form Submits Before Alertify Receives Confirm Box Value (with HTML5)

I have a form with 2 fields, one of which is required. I used HTML5 required attribute to check if the field is filled up during submission.

); $("#reg")[0].submit(); // submit form skipping jQuery bound handler } else { // user clicked "cancel" alertify.error("You did not confirm your reservation."); } }); });

Also changed to a submit event rather than click as that's actually what you want, otherwise the required attribute is useless.

You rarely ever need to use a click event on a submit button. Just bind to the form's submit event.

Solution 2:

I modified the example above to reduce the boilerplate. No need for the bounds check override anymore. Just pass the event and message to the generic confirm() method.

$(document).ready(function () {

    function confirm(event, msg) {
        var evt = event;
        event.preventDefault();
        alertify.confirm(msg, function (e) {
            if (e) {
                evt.currentTarget.submit();
                return true;
            } else {
                return false;
            }
        });
    }

    $("#deleteApplianceForm").submit(function(event){
        confirm(event, "Are you sure you want to delete this appliance?");
    });
});