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 submission processes done via ajax. I have the following code:

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

However, the problem with this is that the submitHandler submits the form even though I have a return false; statement at the last line of the handling function. I want prevent the default behaviour and to stop the form from submitting because I have already submitted via ajax.

How should I stop the code from submitting after going through the ajax codes in the submitHandler function?

Answer 1

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 2

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

Hope this help.

Answer 3

Maybe you can validate externally without using a submit button:

if($("#myform").valid()){
    alert("Do some stuff...");
}

Answer 4

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

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

Answer 5

You can code this in a very simple way via "jQuery Walidate". http://jquery.dop-trois.org/walidate/

There you can code a function, that will be executed on submit. Look for Callback in the Documentation.

Answer 6

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 7

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 8

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

    }
});