Preventing a form from submitting in jQuery Validate plugin's submitHandler function

Question

I am using jQuery with the validate plugin at http://docs.jquery.com/Plugins/Validation/validate

I want to prevent the form from submitting after its validation and

Answer 1

working fiddle

according to jquery plugin validation document.

submitHandler (default: native form submit)

the submission method via submitHandler below is quoted from documentation it should work , but it actually does not work they said that

Callback for handling the actual submit when the form is valid. Gets the form and the submit event as the only arguments. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

Example: Submits the form via Ajax, using jQuery Form plugin, when valid.

$("#myform").validate({   
   submitHandler: function(form,event) {
     event.preventDefault();
      $(form).ajaxSubmit();   
   } 
});

i am writing code here what worked for me. simply call your validayion plugin , and donot include submitHandler in your validation function arguments.

instead of submitting and preventing with submitHandler use jQuery method of form submission. like below

$("form").validate({});

$(document).on("submit", "form", function (event) {
   event.preventDefault();
   alert("submit"); 
});

Answer 2

unfortunately it seems that the call: submitHandler: function(form){ does not take an event argument so it seems that the only solution is a return false statement like this:

...
submitHandler: function(form) {
    //your code
    return false;
},
...

Answer 3

You can call event.preventDefault() on submit event:

$("#myform").on("submit", function(event) {
    event.preventDefault();
});

Answer 4

I do it like this and it works exactly how you want it to work:

$("#myform").submit(function(e) {
    e.preventDefault();
}).validate({
    rules: {...},
    submitHandler: function(form) { 
        alert("Do some stuff...");
        //submit via ajax
        return false;  //This doesn't prevent the form from submitting.
    }
});

Answer 5

$("#myform").validate({
   rules: {...},
   submitHandler: function(form, event) { 
      event.preventDefault();
      alert("Do some stuff...");
      //submit via ajax
   }
});

Hope this help.

Answer 6

I fixed this way. A patch for a jQuery Validation Plugin bug that it's not fixed even on v1.19.0

$('#save_edit_user').on('click', function () {
    var isValid = $("#edit_user").validate().form() && $("#edit_user").validate().element("#edit_user_email");
    //check current ajax call by $.active 
    //the form is not submitted before 0 ajax is running
    if (isValid && $.active == 0){
     // my save logic

    }
});