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?
We use the preventDefault() method with this event to prevent the default action of the form, that is prevent the form from submitting.
jQuery(document). ready(function() { jQuery("#forms). validate({ rules: { firstname: 'required', lastname: 'required', u_email: { required: true, email: true,//add an email rule that will ensure the value entered is valid email id. maxlength: 255, }, } }); });
The jquery validate plugin requires a form element to function, so you should have your form fields (no matter how few) contained inside a form. You can tell the validation plugin not to operate on form submission, then manually validate the form when the correct submit button is clicked.
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. } });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With