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

Posted 2023-05-08

【中文标题】jQuery 不显眼的表单验证器在重置表单时不会隐藏错误消息

【英文标题】：jQuery unobtrusive form validator is not hiding error messages when resetting the form

【发布时间】：2012-10-26 20:19:38

【问题描述】：

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

根据jQuery validate documentation：

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

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

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

【问题讨论】：

如果我没记错的话，验证不会显示和隐藏错误消息，而只是将文本添加到始终可见的 span 中。为了使您的手动解决方案起作用，只需执行相同操作并手动清空“.field-validation-error”... 至于为什么它不能开箱即用，我不知道... :/

好主意。这是一个可行的解决方法，可以解决问题，但我会暂时保留它。谢谢！

如果您正在动态加载该对话框表单，您可能会发现这个问题很有用：***.com/questions/4406291/…

对了，你为什么要自己调用 .parse() 方法？这不是微软这个不起眼的库一开始就已经做的事情了吗？

Tallmaris 应该更好地表述为更清晰，但他的意思是不显眼的库挂钩到 DOM 就绪事件（与 $(function) 相同）以装配表单本身。这可以在文件的最后找到：$jQval.unobtrusive.parse(document);

【参考方案1】：

字段一更改，为什么不trigger element validation

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

【参考方案2】：

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

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

问候

【参考方案3】：

到目前为止给出的答案的唯一问题是所有错误都消失了，而不仅仅是您想要的错误。我在获取地址时遇到了类似的问题，如果状态是 DC，我需要输入象限（NW，NE，SW，SE）。我使用 jquery 添加和删除需求，然后将 @Html.ValidationMessageFor() 包装在 div 中，然后在选择不同状态时简单地隐藏 div。

【参考方案4】：

你在下面使用，对吗？

var form = workflowDialogContent.find('form');

那么你必须使用

form.resetForm();

要重置表单，它会起作用。

【参考方案5】：

试试这个。

var validator = $( "#myform" ).validate();
validator.resetForm();