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