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.

Solution 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/

Solution 2

$("#register_form")[0].reset();, form fields are getting clear, but error messages are not getting cleared.

to do this you can put one more line below it:

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

Although you should do this way:

$( document ).ready(function(){
   var validator = $("#register_form").validate({
       focusCleanup: true,
       rules: {
         // custom rules
       },
       messages: {
         // custom messages
       }
    });
    $('[type="reset"]').on('click', function(){
       validator.resetForm();
    });
});

---

You should put your validator.resetForm(); in the click event of reset button.

Solution 3

If nothing works then try this approach (specially for clearing data purpose):

1- Form html:

<input type='reset' class="button_grey resetForm" value='Reset'>

2- Jquery validate

// you can add error fields
var validator = $("#clearform").validate({
      focusCleanup: true
});

3- Reset the form

$('[type="reset"]').on('click', function(){ 
      $("#clearform").closest('form').find("input[type=text], textarea").val(""); 
      $('input:checkbox').removeAttr('checked'); 
      validator.resetForm(); 
      return false;
});

Comments

[Umesh Awasthi]

with this, error message are not getting cleared at all

[Jai]

post some markup or better to create a jsfiddle for it.