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>

@Ken: Good point, sorry for not being more verbose.

Adrian Grigore
– Adrian Grigore

2011-03-28 13:09:18 +00:00
Commented Mar 28, 2011 at 13:09 — Adrian Grigore
– Adrian Grigore, Commented Mar 28, 2011 at 13:09

John Culviner · Accepted Answer · 2011-11-17 04:56:02Z

54

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

answered Nov 17, 2011 at 4:56

John Culviner

23.1k6 gold badges59 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

John Culviner Over a year ago

Haha sweet! Glad its still useful :)

dommer Over a year ago

Tried four suggestions. This was the one that worked.

Steve Over a year ago

@JohnCulviner you just saved my precious time..thanks

Santhos Over a year ago

It seems there also should be something like $form.find(".input-validation-error").removeClass("input-validation-error");

Thierry Over a year ago

Spent hours trying different suggestions on SO and elsewhere but to no avail until I found this one! Great answer! Thanks.

Darin Dimitrov · Accepted Answer · 2011-03-28 16:24:29Z

33

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

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

answered Mar 28, 2011 at 16:24

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

2 Comments

Odys Over a year ago

I was expecting resetForm() to do this.. I was wrong. Thank you

Atters Over a year ago

I found this to work for me $('.field-validation-error').remove();

Towa48 · Accepted Answer · 2012-09-07 12:14:36Z

9

you could use native solution (validate 1.9.0 + unobtrusive)

var $form = $(this).closest('form');

// reset errors with unobtrusive
$form.trigger('reset.unobtrusiveValidation');

// reset inputs
var validator = $form.validate(); // get saved validator
//validator.settings.ignore = ''; // if form hided (closed ui dialogs, etc)
validator.resetForm();

answered Sep 7, 2012 at 12:14

Towa48

911 silver badge1 bronze badge

2 Comments

Cat_Clan Over a year ago

You don't need to do the resetForm at the end. The triggered event does it internally.

Tom Regan Over a year ago

This works, but the validation summary remains invisible on subsequent form submits.

Martin · Accepted Answer · 2011-10-07 08:27:21Z

4

To follow up from Darin Dimitrov's message the following will also clear the validation summary...

$(".validation-summary-errors")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid");

answered Oct 7, 2011 at 8:27

Martin

1,3752 gold badges14 silver badges21 bronze badges

Comments

Gudradain · Accepted Answer · 2014-03-04 19:29:44Z

To completement Darin and Kennifer answer, I put everything together and added a last part to reenable lazy validation

        //Reset validation message
        $('.field-validation-error')
        .removeClass('field-validation-error')
        .addClass('field-validation-valid');

        //Reset input, select and textarea style
        $('.input-validation-error')
        .removeClass('input-validation-error')
        .addClass('valid');

        //Reset validation summary
        $(".validation-summary-errors")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid");

        //To reenable lazy validation (no validation until you submit the form)
        $('form').removeData('unobtrusiveValidation');
        $('form').removeData('validator');
        $.validator.unobtrusive.parse($('form'));

mfitzp · Accepted Answer · 2015-02-23 11:23:36Z

1

The following code uses find to search first for the container then the child list. If the list is empty the class validation-summary-valid is added to the container and validation-summary-errors removed.

var container = $('form').find('[data-valmsg-summary="true"]');
var list = container.find('ul');

if (list && list.length) {
    list.empty();
    container.addClass('validation-summary-valid').removeClass('validation-summary-errors');

edited Feb 23, 2015 at 11:23

mfitzp

15.6k7 gold badges55 silver badges72 bronze badges

answered Feb 23, 2015 at 10:39

Barmeshwar Singh

111 bronze badge

Comments

Ravi Vanapalli · Accepted Answer · 2011-03-28 10:13:01Z

0

Hope this helps you http://www.electrictoolbox.com/jquery-clear-form/

Happy coding

answered Mar 28, 2011 at 10:13

Ravi Vanapalli

9,9703 gold badges36 silver badges43 bronze badges

Collectives™ on Stack Overflow

Reset MVC form with jquery

7 Answers 7

5 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related