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

Question

我正在尝试正确验证并重置表单.验证工作正常 - 成功监视所需的字段.但是,当我重置表单时 - 我只看到输入的红色背景清晰,而不是验证消息.

根据jQuery验证文档:

将输入字段重置为其原始值(需要表单插件),删除指示无效元素的类并隐藏错误消息.

以下是我认为与该问题相关的所有信息.如果您想看到其他任何内容,请告诉我.

这是我在模型中生成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; }

站点是一个以值-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,则会显示我的验证消息.

现在,每当更改选择时,我想重置我的表单.我从这个逻辑:如何清除Jquery验证错误消息？

$(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

我认为您可以将其添加到您的解决方法中：

var form = $("#MyFormId");
form.find(':input').removeClass("input-validation-error");

问候