Reset MVC form with jquery

Question

How do I reset a form?

i.e. Clear values of all fields and remove ValidationSummary error messages validation-summary-errors with jquery.

I use the below code but it does not work:

    var validator = $("#myform").validate();     validator.resetForm(); 

I'm using asp.net MVC3 and the jquery scripts are include in my page.

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

Answer 1

I wrote a quick jQuery extension to handle this issue when I encountered it which:

• Clears field level validation errors
• Clears/hides validation summary
• Resets jQuery Validate's internal error list

It can be called from an element $(selected) within the form or on the form its self.

Here is a calling example (the input is within a form):

<input onclick="$(this).resetValidation()" type="reset" value="Reset" /> 

Here is the jQuery plugin code:

(function ($) {      //re-set all client validation given a jQuery selected form or child     $.fn.resetValidation = function () {          var $form = this.closest('form');          //reset jQuery Validate's internals         $form.validate().resetForm();          //reset unobtrusive validation summary, if it exists         $form.find("[data-valmsg-summary=true]")             .removeClass("validation-summary-errors")             .addClass("validation-summary-valid")             .find("ul").empty();          //reset unobtrusive field level, if it exists         $form.find("[data-valmsg-replace]")             .removeClass("field-validation-error")             .addClass("field-validation-valid")             .empty();          return $form;     }; })(jQuery); 

Hopefully this helped! You can read more about it and see some other examples on my blog post here as well:

http://www.johnculviner.com/post/2011/11/16/ClearReset-MVC-3-Form-and-Unobtrusive-jQuery-Client-Validation.aspx

Answer 2

$('.field-validation-error')     .removeClass('field-validation-error')     .addClass('field-validation-valid');  $('.input-validation-error')     .removeClass('input-validation-error')     .addClass('valid');