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