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?

score 58 · Accepted Answer · answered Apr 20 '13 at 13:42

58

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

answered Apr 20 '13 at 13:42

Zoltan

2,631
2
17
13

Doing it exactly like this i get ReferenceError: e is not defined e.preventDefault(); – Guillermo Siliceo Trueba May 19 '13 at 17:24
I also get ReferenceError: e is not defined e.preventDefault();, any idea what exactly this means? – Damainman Sep 10 '13 at 15:26
2

I know this is an old post, but if someone experience the same issue, they should type event.preventDefauld() instead. e is a shortcut for event. If you want e to work, put e between the function brackets, like this function(e). – thar Oct 25 '14 at 17:00
2

Well, e is not really a shortcut, it is a parameter of the anonymous function which gets called when the form gets submitted. If you get a ReferenceError: e error message then you must have made a typo in this line: $("#myform").submit(function(e) { – Zoltan Jan 19 '15 at 04:36
Excellent, this helped me a lot! – BruneX Jan 04 '19 at 17:09
This shouldn't be the accepted answer. The ajax fires the request anyway before the validation. – Ondrej Sotolar Aug 14 '20 at 17:20

score 45 · Answer 2 · answered Apr 21 '14 at 14:57

45

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

Hope this help.

answered Apr 21 '14 at 14:57

pockiiie

551
4
4

1

It might help to explain to the person asking the question what `event.preventDefault()` does, and why it works (or provide a reference to it). – Sean Quinn Apr 21 '14 at 15:15
4

Hooking into the source code of version 1.12.0, it is clear that configuring the `submitHandler` will automatically prevent the default behaviour. Also, and as indicated by @user3157665, the signature of the handler is `submitHandler(form, event)` (the documentation is not in sync with the source code). – Younes May 06 '14 at 17:33
This should be the accepted answer because the validation happens before the request is fired. – Ondrej Sotolar Aug 14 '20 at 17:23
If this doesn't work for some reason and the form still seems to be submitting, check if there is an error in the validation rules. If there is a validator error (e.g. invalid rule), the `submitHandler` does not fire. – Kunal Apr 18 '22 at 20:14

score 3 · Answer 3 · answered Dec 17 '18 at 15:29

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

score 2 · Answer 4 · answered May 29 '12 at 12:04

2

Maybe you can validate externally without using a submit button:

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

answered May 29 '12 at 12:04

pilavust

538
1
7
20

Did you try putting focus on a form input element and hitting the enter key? – Fr0zenFyr Feb 21 '19 at 05:32

score 1 · Answer 5 · answered May 29 '12 at 12:01

1

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

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

answered May 29 '12 at 12:01

VisioN

143,310
32
282
281

The submitHandler function doesn't seem to take an event parameter. – Carven May 29 '12 at 12:15
@xEnOn Yes, that's why I would separately add `submit` event to the form. – VisioN May 29 '12 at 12:17

score 1 · Answer 6 · answered May 30 '12 at 07:23

1

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.

answered May 30 '12 at 07:23

Gregory

21
1

score 0 · Answer 7 · answered Jun 19 '12 at 07:51

0

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;
},
...

answered Jun 19 '12 at 07:51

Miquel Adell

1,132
3
11
24

score 0 · Answer 8 · answered Feb 06 '19 at 17:22

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

    }
});

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

8 Answers8

Linked

Related