jQuery 不显眼的表单验证器在重置表单时不会隐藏错误消息

Question

我正在尝试正确验证和重置表单。验证工作正常——所需的字段已成功监控。但是，当我重置表单时，我只看到输入内容的红色背景清晰，而不是验证消息。

根据jQuery validate documentation :

Resets input fields to their original value (requires form plugin), removes classes indicating invalid elements and hides error messages.

这是我认为与该问题相关的所有信息。如果您还想看其他内容，请告诉我。

以下是我在模型中生成 DOM 元素的方法。该元素需要验证:

//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 是一个以 -1 值开头的选择列表。任何其他选择均有效。因此，我在 0 到最大值的范围内进行验证。

在 JavaScript 中，当用户按下表单上的“提交”按钮时，我对表单运行以下代码:

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()) {
}

当用户按下“提交”按钮时，如果所选站点的值为 -1，则会验证表单并显示我的验证消息。

现在，每当选择更改时，我想重置我的表单。我从以下位置获取了这个逻辑: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();
}

但是，当我运行此代码时...突出显示被删除，但错误消息仍然存在。如果我调用注释代码 - 验证错误将被隐藏，但下次验证我的表单时它们不会重新出现。

验证后: 调用resetForm后:

知道为什么我会看到这种行为吗？

更新:作为一种解决方法，以下代码似乎可以进行适当的清理:

$('.field-validation-error').empty();

Answer 1

为什么不trigger element validation一旦字段改变

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