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.

$(document).on("click", "[data-toggle=\"contactAdmin\"]", function() {
  bootbox.dialog({
    title: "Contact admin",
    buttons: {
      close: {
        label: 'Close',
        className: "btn btn-sm btn-danger",
        callback: function() {}
      },
      success: {
        label: "Submit",
        className: "btn btn-sm btn-primary",
        callback: function() {
          $("#webteamContactForm").validate({
            rules: {
              requestType: {
                required: true
              }
            },
            messages: {
              requestType: {
                required: "Please specify what your request is for",
              }
            },
            highlight: function(a) {
              $(a).closest(".form-group").addClass("has-error");
            },
            unhighlight: function(a) {
              $(a).closest(".form-group").removeClass("has-error");
            },
            errorElement: "span",
            errorClass: "help-blocks",
            errorPlacement: function(error, element) {
              if (element.is(":radio")) {
                error.appendTo(element.parents('.requestTypeGroup'));
              } else { // This is the default behavior 
                error.insertAfter(element);
              }
            },
            submitHandler: function(form) {
              alert("Submitted!");
              var $form = $(form);
              $form.submit();
            }
          }).form();
          return false;
        }
      }
    },
    message: '<div class="row">  ' +
      '<div class="col-md-12"> ' +
      '<form id="webteamContactForm" class="form-horizontal" method="post"> ' +
      '<p>Please get in touch if you wish to delete this content</p>' +
      '<div class="form-group"> ' +
      '<div class="col-md-12"> ' +
      '<textarea id="message" name="message" class="form-control input-md" rows="3" cols="50">This email is to notify you the creator is putting a request for the following item\n\n' +
      this.attributes.getNamedItem("data-url").value + '\n\n' + '</textarea> ' +
      '<span class="help-block">Feel free to change the message and add more information. Please ensure you always provide the link.</span> </div> ' +
      '</div> ' +
      '<div class="form-group requestTypeGroup"> ' +
      '<label class="col-md-4 control-label" for="requestType">This request is for:</label> ' +
      '<div class="col-md-4"> <div class="radio"> <label for="Edit"> ' +
      '<input type="radio" name="requestType" id="requestType-0" value="Edit"> ' +
      'Editing </label> ' +
      '</div><div class="radio"> <label for="Delete"> ' +
      '<input type="radio" name="requestType" id="requestType-1" value="Delete"> Deletion</label> ' +
      '</div> ' +
      '</div> </div>' +
      '</form> </div>  </div>'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>

<a data-toggle="contactAdmin" data-title="help" data-url="http:/www.mydomain.com/some-url" href="#">Contact Web team</a>

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/

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

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
   }
    });

Answer 4

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".