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

35
votes

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?

8
asp.netasp.net-mvcvalidationasp.net-mvc-2
Clicking the Cancel button should dismiss the JQuery Dialog, which would require you to construct a new one when the user clicks the Edit button. At that point, the MVC validation should already be at its default state. If it's not (i.e. the underlying DOM objects associated with the dialog still contain data from the last Dialog call), the proper way is to simply clear the values from the DOM objects. – Robert Harvey

8 Answers

52
votes

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.

19
votes

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();
7
votes
function resetValidation() {

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

}
2
votes

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

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.

1
votes

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:

0
votes

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');
});
0
votes

Here you can use simply remove error message 

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

OR

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

enter image description here