Jquery validation plugin | resetForm is not working

Question

I am trying to clear all error messages as well error highlighting when user click on the clear form button, below are actual requirements

1. Validate form using Jquery validation
2. When user click on a field error message should be cleared (per field)
3. On clicking reset button, every error should be cleared

here is my code

$( document ).ready(function(){
   var validator = $("#register_form").validate({
   validator.resetForm();
   focusCleanup: true,
 rules: {
  // custom rules
},
messages: {
// custom messages
    }
  });

For me, first 2 things are working, but when I am trying to clear complete form, I am not able to do this.this is how I am trying to clear it

function clearInputForm(){
  alert("");
  var validator1 = $( "#register_form" ).validate();
  validator1.resetForm();
   $("#register_form")[0].reset();
}

But nothing is happening , though with $("#register_form")[0].reset();, form fields are getting clear, but error messages are not getting cleared.

Answer 1

Quote OP:

1) Validate form using Jquery validation

You cannot put the validator.resetForm(); method inside of the .validate() method.

.validate() is a plugin method where the only thing that can go inside is a comma separated map of the allowed options, {option:value, option:value, etc.}, as per the .validate() method documentation.

resetForm() method documentation

$("#register_form").validate({
    rules: {
        firstname: {
            required: true
        },
        lastname: {
            required: true
        },
        cell: {
            required: true
        }
    },
    messages: {
        // custom messages
    }
});

.validate() method DEMO: http://jsfiddle.net/P46gL/

---

Quote OP:

2) When user click on a field error message should be cleared (per field)

This is thanks to the focusCleanup option. As you've already done, set it to true and when you click on the field with an error, the error clears.

$("#register_form").validate({
    focusCleanup: true,
    rules: {
       ....

focusCleanup DEMO: http://jsfiddle.net/P46gL/1/

---

Quote OP:

3) On clicking reset button, every error should be cleared

You would call the resetForm() method from within a click handler of the reset button. This will immediately remove all error messages from the entire form and reset the validation plugin to its initial state.

$('#clearform').on('click', function () {
    $("#register_form").validate().resetForm();  // clear out the validation errors
});

Make sure the reset button is type="button" or type="reset" or it will trigger validation.

<input type="reset" id="clearform" value="reset form" />

Clear Errors DEMO: http://jsfiddle.net/P46gL/3/

---

Clearing out the field data

You can clear out the values of the fields by calling a JavaScript .reset() like this.

$('#clearform').on('click', function () {
    var form = $("#register_form");
    form.validate().resetForm();      // clear out the validation errors
    form[0].reset();                  // clear out the form data
});

Full Working DEMO: http://jsfiddle.net/P46gL/4/