[Solved] Preventing a form from submitting in jQuery Validate plugin’s submitHandler function

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?

Enquirer: Carven

||

Solution #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.
    }
});
Respondent: Zoltan

Solution #2:

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

Hope this help.

Respondent: pockiiie

Solution #3:

Maybe you can validate externally without using a submit button:

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

Solution #4:

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

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

Solution #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.

Respondent: Gregory

Solution #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"); 
});
Respondent: Waqar Hussain

Solution #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;
},
...
Respondent: Miquel Adell

Solution #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

    }
});
Respondent: Adrian P.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.