How do I clear MVC client side validation errors when a cancel button is clicked when a user has invalidated a form?

Question

I have a partial view that is rendered within a main view. The partial view takes advantage of System.ComponentModel.DataAnnotations and Html.EnableClientValidation().

A link is clicked, and div containing the partial view is displayed within a JQuery.Dialog().

I then click the save button without entering any text in my validated input field. This causes the client side validation to fire as expected, and display the '*required' message beside the invalid field.

When the cancel button is clicked, I want to reset the client side MVC validation back to it's default state and remove any messages, ready for when the user opens the dialog again. Is there a recommended way of doing this?

Solution 1

This answer is for MVC3. See comments below for help updating it to MVC 4 and 5

If you just want to clear the validation-messages so that they are not shown to the user you can do it with javascript like so:

function resetValidation() {
        //Removes validation from input-fields
        $('.input-validation-error').addClass('input-validation-valid');
        $('.input-validation-error').removeClass('input-validation-error');
        //Removes validation message after input-fields
        $('.field-validation-error').addClass('field-validation-valid');
        $('.field-validation-error').removeClass('field-validation-error');
        //Removes validation summary 
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-errors').removeClass('validation-summary-errors');

    }

If you need the reset to only work in your popup you can do it like this:

function resetValidation() {
        //Removes validation from input-fields
        $('#POPUPID .input-validation-error').addClass('input-validation-valid');
        $('#POPUPID .input-validation-error').removeClass('input-validation-error');
        //Removes validation message after input-fields
        $('#POPUPID .field-validation-error').addClass('field-validation-valid');
        $('#POPUPID .field-validation-error').removeClass('field-validation-error');
        //Removes validation summary 
        $('#POPUPID .validation-summary-errors').addClass('validation-summary-valid');
        $('#POPUPID .validation-summary-errors').removeClass('validation-summary-errors');

    }

I hope this is the effect you seek.

Solution 2

If you are using unobtrusive validation that comes with MVC you can simply do:

$.fn.clearErrors = function () {
    $(this).each(function() {
        $(this).find(".field-validation-error").empty();
        $(this).trigger('reset.unobtrusiveValidation');
    });
};

------------------------------------------------------------------------

Third Party Edit: This mostly worked in my case, but I had to remove the $(this).find(".field-validation-error").empty(); line. This appeared to affect the re-showing of the validation messages when resubmitting.

I used the following:

$.fn.clearErrors = function () {
        $(this).each(function() {
            $(this).trigger('reset.unobtrusiveValidation');
        });
    };

and then called it like this:

$('#MyFormId input').clearErrors();

Solution 3

function resetValidation() {

    $('.field-validation-error').html("");

} 

Solution 4

You can simply define a new function in jQuery:

$.fn.resetValidation = function () {
    $(this).each(function (i, e) {
        $(e).trigger('reset.unobtrusiveValidation');
        if ($(e).next().is('span')) {
            $(e).next().empty();
        }
    });
};

and then use it for your input fields:

$('#formId input').resetValidation();

Solution 5

Thank you. I had a similar question for a slightly different scenario. I have a screen where when you click one of the submit buttons it downloads a file. In MVC when you return a file for download, it doesn't switch screens, so any error messages which were already there in the validation summary remain there forever. I certainly don't want the error messages to stay there after the form has been submitted again. But I also don't want to clear the field-level validations which are caught on the client-side when the submit button is clicked. Also, some of my views have more than one form on them.

I added the following code (thanks to you) at the bottom of the Site.Master page so it applies to all of my views.

    <!-- This script removes just the summary errors when a submit button is pressed 
    for any form whose id begins with 'form' -->
<script type="text/javascript">
    $('[id^=form]').submit(function resetValidation() {
        //Removes validation summary
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-errors').removeClass('validation-summary-errors');
    });
</script>

Thanks again.

View more solutions

Comments

[Sci-fi]

Thanks for your response. I had implemented a similar solution, but it exposes an additional problem, that when the cancel button is clicked, the textbox looses focus, and fires the validation again! You end up seeing the error message appear before the dialog is closed. The only way I may end up solving this problem is by injecting the dialog into the div using a JQuery.Ajax call to get the partial view into the DIV used by the popup. This way, when the dialog is closed, the 'persistance' is lost.

[Falle1234]

Couldn't you remove focus from the textbox before you call the "reset"-function? Or am I missing something in your setup?

[Robert Tanenbaum]

It's now a year later and I upgraded the project to VS 2010, MVC3 and Razor. For some reason MVC3 no longer puts "id='form0'" tag when using HTML.BeginForm() helper function by default. You would have to do a new { id = 'form0" } in every Html.BeginForm(). Or you have to set ClientValidationEnabled to true and set UnobtrusiveJavaScriptEnabled to false. What I ended up doing is modify the jQuery selector to just work for any form tag as follows "$('form').submit(function resetValidation() {"

[AaronSieb]

I used this method in an MVC 4 app, but it left the validation errors displayed. Adding $('.validation-summary-errors li').remove(); to the top of the method fixed that issue.

[Alexander Puchkov]

In MVC5 validation message text was still displayed, so I had to clear with $('.field-validation-error').text('');

[tala9999]

Can we just clear validation error for a specific input (based on id for example) instead of all the inputs?