Jquery Validate resetForm does not clear error messages

Question

I am using tabs to navigate between forms and when the user presses the next button, form validation takes place. If there are errors, it will show the summary of errors at the top and also individual errors at each of the fields. The user corrects the errors, and presses the Next button to advance to the next tab. When the press the previous button, the error messages are not cleared. How would I clear the error container at the top and the individual error messages at each of the form fields provided that the form is valid when pressing the next button. I have tried the resetForm(), but that didn't work. Here is my code ```

Accepted Answer

Normally, `resetForm()` should be removing the default label elements containing the error messages.

Your code:

```
var formID = $(this).closest('form').attr('id'); // <- the ID of the form
var form = $('#'+ formID);                       // <- the form object

if (form.valid()){
   formID.validate().resetForm(); // <- should be your `form` variable, not `formID`.
}
```

However, your `formID` variable only represents the ID of the form so it's not a proper selector. Since your `form` variable represents the proper selector, `$('#'+ formID)`, you'll need to use `form.validate().resetForm()` rather than `formID.validate().resetForm()`

See documentation: jqueryvalidation.org/Validator.resetForm

Jquery Validate resetForm does not clear error messages

Solution

Problem