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?

Answer 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.

Answer 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();

Answer 3

function resetValidation() {

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

} 

Answer 4

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.

Answer 5

You can tap into the validation library methods to do this. There are two objects of interest: FormContext and FieldContext . You can access the FormContext via the form's __MVC_FormValidation property, and one FieldContext per validated property via the FormContext 's fields property.

So, to clear the validation errors, you can do something like this to a form :

var fieldContexts = form.__MVC_FormValidation.fields;
for(i = 0; i < fieldContexts.length; i++) {
    var fieldContext = fieldContexts[i];
    // Clears validation message
    fieldContext.clearErrors();
}
// Clears validation summary
form.__MVC_FormValidation.clearErrors();

Then, you can hook that piece of code to whichever event you need.

Sources for this (quite undocumented) insight:

• http://bradwilson.typepad.com/presentations/advanced-asp-net-mvc-2.pdf (Mentions FieldContext)
• https://stackoverflow.com/a/3868490/525499 (For pointing out this link , which metions how to trigger client-side validation via javascript)

Answer 6

In order to complete clear the validation artifacts including the message, the coloured background of the input field, and the coloured outline around the input field, I needed to use the following code, where this was (in my case) a Bootstrap modal dialog containing an imbedded form.

$(this).each(function () {
    $(this).find(".field-validation-error").empty();
    $(this).find(".input-validation-error").removeClass("input-validation-error");
    $(this).find(".state-error").removeClass("state-error");
    $(this).find(".state-success").removeClass("state-success");
    $(this).trigger('reset.unobtrusiveValidation');
});

Answer 7

Here you can use simply remove error message

$('.field-validation-valid span').html('')

OR

  $('.field-validation-valid span').text('')

Answer 8

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();

Answer 9

I've this issue for "Validation summery" after form ajax submit and done it like this:

        $form.find('.validation-summary-errors ul').html('');

and complete code is:

$("#SubmitAjax").on('click', function (evt) {
    evt.preventDefault();
    var $form = $(this).closest('form');
    if ($form.valid()) {

        //Do ajax call . . .

        //Clear validation summery
        $form.find('.validation-summary-errors ul').html('');
    }
});