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 f

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/

Answer 2

Thanks Sparky for your help, the solution your provided gave me the answer. It seems having the submitHandler causes some confusion for the submit logic.

I removed the submitHandler and added the following to success callback and everything works as expected

success: {
         label: "Submit",
         className: "btn btn-sm btn-primary",
         callback: function () {
             if($("#webteamContactForm").valid()){
                    var form = $("#webteamContactForm");
                    form.submit();
                } else {
                    return false;
                }
         }
    }

Answer 3

You should change the name for your submit button, because you have a naming conflict. For example, try changing it from name="submit" to name="other".

Answer 4

I know this is an old post but I thought I would share my resolve to a similar problem. I could not get my form to submit by pressing enter but I could get it to validate on enter. So I used the chaining method and now I can submit my form on enter.

jQuery:

  //Variables created without the keyword var, are always global, even if they are created inside a function.
    var form = $('#<?echo $PAGEID?>');
    var FormError = $('.alert-danger',form);
    var success = $('.alert-success',form);

     form.keypress(function(e){
         if(e.which == 13){ //TRIGGER SUBMIT THROUGH ENTER      
             document.getElementById('defaultActionButton').click(); 
         }
     }).validate({
        focusInvalid: false, // do not focus the last invalid input
        onkeyup: false, 
        ignore: ".ignore", //required for hidden input validation ie: hiddenRecaptcha
        rules:{
            "TYPE": {
                required: true,     
            },
            "MSG": {
                required: true,
                rangelength:[40,1000]
            },
            "CONTACT": {
                 required: {
                     depends: "#newuser:checked"
                 }
            },
            "EMAIL": {
                 required: true,
                 email: {
                    depends: function() {
                        if(!$("#newuser:checked"))
                            return true;
                        else
                            return false;
                    }
                 },
                 HTH_TelephoneEmail: {
                        depends: function() {
                            if($("#newuser:checked"))
                                return true;
                            else
                                return false;
                        }
                     }
            },          
            hiddenRecaptcha: {
                required: function () {
                    if (grecaptcha.getResponse() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
        messages: { // custom messages for form validation input
               "TYPE": {
                    required: 'Please select an option as it pertains to your inquiry'
               },
               "MSG": {
                    required: 'Please provide some content as it pertains to your inquiry'       
               },
               "CONTACT": {
                required: "Please enter a contact person or company"
               },
              hiddenRecaptcha: {
                required: function() {
                    $(".g-recaptcha:first").tooltip("enable").tooltip("show");
                }
              }
        },
        showErrors: function(errorMap, errorList) {
            // Clean up any tooltips for valid elements
            $.each(this.validElements(), function (index, element) {
                element = $(element);
                NoError_ToolTip(element);
            });
            // Create new tooltips for invalid elements
            $.each(errorList, function (index, error) {
                element = $(error.element);
                message = error.message;
                Error_ToolTip(element,message);
            });
        },                  
        invalidHandler: function (event, validator) { //display error alert on form submit     
            success.hide();
            $(document).scrollTop( $(".form-body").offset().top ); 
        },
         submitHandler: function () { 
       Submit_Complete(); //fires ajax call
   }
    });