jQuery unobtrusive form validator is not hiding error messages when resetting the form

Question

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

Answer 1

why not trigger element validation as soon as the field is altered

$('#myFormId input').on('change', function(){
    validator.element($(this));
});