I have a form that is using jQuery Validate plugin for client side validation, and submits via AJAX. After the form is submitted, I would like it to reset itself. I have used the .resetForm()
method to reset the fields, which works, but the problem is that the validate plugin still immediately tries to validate fields when they're focused, and gives an error before giving the new submission a chance to enter their input.
Example Flow:
Typically the plugin will let your enter your input before telling you that it's incorrect. Is there any way to truely reset the form and not have the validation occur on focus again, without turning off on focus validation all together?
Thanks, and here's a cleaned up/simplified code samples!
// Validation
$('#registerForm').validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
success: function(response) {
if( response == 'success' ) {
resetMyForm();
}
else {
alert('unsuccessful');
}
}
})
}
});
})
function resetMyForm() {
$('#registerForm').resetForm();
v.prepareForm(); // Tried adding this, no help
v.hideErrors(); // Tried adding this, no help
}
You need to reset the form and run the Validation plugin method resetForm
like this:
var v = $("form").validate({
submitHandler: function(form) {
//resetForm is a method on the validation object, not the form
v.resetForm();
form.reset();
}
});
That seemed to take care of any issues I saw while following your workflow. See this: http://jsfiddle.net/nxXNz/27/