jQuery Validate Issue with form.reset and validator.resetForm

Question

I have a form with some required fields. If the user clicks a button, validation should fire, and their input will be processed. However, after processing, I want to reset/clear the form and allow them to enter more information. After I call form.reset() and validator.resetForm() though, the validation messages are shown because the form has been cleared. What is the proper way to clear the form and ensure that no validation messages appear? Here's the complete fiddle illustrating the issue. Here's the code snippet that I'd like to get working:

$('#btnGo').click(function(){
    // clear the form
    $('#frmFoo')[0].reset();
    // AFTER this call to resetForm, validation message is shown again.  Why?
    validator.resetForm();
});

Thanks,

Andy

Sparky · Accepted Answer · 2013-09-03 17:57:06Z

1

The jQuery Validate plugin, by default, treats your button element as a submit, which is why the validation messages come right back during/after the reset.

You simply need to add type="button" to your button so that it doesn't trigger a submit.

<button type="button" id="btnGo">Do Something and Clear Form</button>

DEMO: http://jsfiddle.net/AxucF/1/

answered Sep 3, 2013 at 17:57

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Validate Issue with form.reset and validator.resetForm

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related