jQuery unobtrusive form validator is not hiding error messages when resetting the form
asp.net-mvc, asp.net-mvc-3, jquery, validation
Solution
why not trigger element validation as soon as the field is altered
$('#myFormId input').on('change', function(){
validator.element($(this));
});
Problem
I am attempting to properly validate and reset a form. The validation works fine -- fields which are required are successfully monitored. However, when I go to reset my form -- I only see the red background for my inputs clear, not the validation messages. According to the jQuery validate documentation: Resets input fields to their original value (requires form plugin), removes classes indicating invalid elements and hides error messages. Here's all the info I think is relevant to the issue. Please let me know if you would like to see anything else. Here is how I generate a DOM element in my Model. This element needs validation: ``` //Model.ascx <div class="detailsRow required"> <%= Html.LabelFor(model => model.Site) %> <%= Html.DropDownListFor(model => model.SelectedSiteID, new SelectList(Model.Site, "Key", "Value"))%> <%= Html.ValidationMessageFor(model => model.SelectedSiteID)%> </div> //Model.cs [DisplayName("Site")] public List<KeyValuePair<int, string>> Site { get; set; } [Range(0, int.MaxValue, ErrorMessage = "Site required")] public int SelectedSiteID { get; set; } ``` Site is a select list which starts with a value of -1. Any other selection is valid. As such, I validate on a range from 0 to max. Over in JavaScript, I run the following code against my form when the user presses the 'Submit' button on the form: ``` var form = workflowDialogContent.find('form'); $.validator.unobtrusive.parse(form); //Maintain a reference to the current formValidator to be able to reset. var formValidator = $.data(form[0], 'validator'); if (form.valid()) { } ``` When the user pressed submit, the form is validated and my validation message is shown if the selected site has a value of -1. Now, whenever the a selection is changed, I want to reset my form. I've taken this logic from: How to clear Jquery validation error messages? ``` $(window).on('change', '#SelectedSiteID', function () { //Returns the formValidator we maintained a reference to. var validator = WorkflowDialogBuilder.getCurrentFormValidator(); validator.resetForm(); //TODO: resetForm's documentation says that it hides the errors, but I did not experience this, so I am doing it manually. //$('.field-validation-error').empty(); } ``` However, when I run this code... the highlighting is removed, but the error messages remain. If I call the bit of commented code -- the validation errors are hidden, but they do not re-appear the next time my form is validated. After validating: After calling resetForm: Any ideas why I would be seeing such behavior? Update: As a work around, the following bit of code seems to do proper clean-up: ``` $('.field-validation-error').empty(); ```