jQuery .validate() submitHandler not firing

Question

I'm loading a dialog box with a form that's built on-the-fly using Bootbox.js and I'm validating user input with a jQuery validate plugin.

Validation works just fine, but the submitHandler is ignored when the form is filled in successfully.

What's going wrong?

submitHandler: function(form) {
    alert("Submitted!");
    var $form = $(form);
    $form.submit();
}

See the full example below. I've looked at other posts where a similar issue has been raised. Unfortunately they seem to have the form rendered on the page whereas I'm rendering my via jQuery.

View on jsFiddle

Answer 1

Inspecting the DOM of the jsFiddle and two problems become apparent.

1. Your "submit" <button> is a type="button".

2. Your "submit" button is outside of the <form></form> container.

If you want the jQuery Validate plugin to automatically capture the click event of the "submit" button...

• the button must be a type="submit"
• The button must be within the <form></form> container.

These two conditions must be met if you want the plugin to operate as intended.

---

You've also incorrectly placed the .validate() method within the success callback of your modal dialog box "submit" button.

The .validate() method is only used for initializing the plugin and should be called once after the form is created.

---

EDIT:

After playing around with this, it becomes apparent that the Bootbox modal plugin may have some critical limitations that interfere with the submission of the form.

1. I am initializing the Validate plugin after the dialog is opened.

2. I am using the .valid() method within the "submit" to trigger the validation test.

I can get validation initialized and working as it should, but the dialog is dismissed before the actual form submission takes place. Perhaps there is a solution, but after reviewing the documentation for Bootbox, it's not readily apparent.

https://jsfiddle.net/vyaw3ucd/2/

---

EDIT 2:

As per the OP's solution...

bootbox.dialog({
    // other options,
    buttons: {
        success: {
            label: "Submit",
            className: "btn btn-sm btn-primary",
            callback: function () {
                if ($("#webteamContactForm").valid()) {
                    var form = $("#webteamContactForm");
                    form.submit();  // form submits and dialog closes
                } else {
                    return false;  // keeps dialog open
                }
            }
        }
    }
});

However, by simply using the supplied form argument directly, you do not have any errors when using the submitHandler option of the jQuery Validate plugin.

submitHandler: function (form) {
    console.log("Submitted!");
    form.submit();
}

DEMO: https://jsfiddle.net/vyaw3ucd/5/