jQuery 验证器在 ajax 调用后验证不再存在的表单元素答案

【问题标题】：jQuery validator is validating against no longer existing form elements after ajax calljQuery 验证器在 ajax 调用后验证不再存在的表单元素
【发布时间】：2019-03-08 09:46:05
【问题描述】：

我有一个表单，它可以根据用户所做的某些选择动态添加或删除输入字段。

基本形式如下所示，简化：

<form action="...some/path..." id="MyForm" method="post">

<!-- the first input field is a select list, depending on the selected option, an ajax call will be made to update the div below with new input fields -->

<select name="selectList">
    <option>#1</option>
    <option>#2</option>
    <option>#3</option>
    <option>...</option>
</select>

<div id="UpdateThisSection"></div>

<input type="submit" value="Submit">

</form>

根据用户从选择列表中选择的选项，用户将看到不同的输入字段，这些字段在#UpdateThisSection div 中呈现。

选项 #1 的输入字段为：

日期字段（必填），因此required 属性设置为输入字段，以及自定义data-type="Date" 属性
文本（可选），未设置required 属性

选项 #2 的输入字段为：

文本（可选），无required 属性集
文本（可选），无required 属性集

选项 #3 的输入字段为：

文本（可选），无required 属性集
数字（可选）、required 属性集以及自定义data-type="Numeric" 属性

jquery 验证是这样实现的：

$("#MyForm").validate();

$.validator.addMethod("usDate",
            function (value, element) {
                return value.match(/^(0?[1-9]|1[0-2])[/., -](0?[1-9]|[12][0-9]|3[0-1])[/., -](19|20)?\d{2}$/);
            },
            "Please enter a valid date."
        );

$("input[data-type='Date']").each(function () {
    if ($(this).prop("required")) {
        $(this).rules("add",
            {
                usDate: true
            });
     }
});

$("input[data-type='Numeric']").each(function () {
    $(this).rules("add",
        {
            number: true
        });
});

如果我打开表单并选择任何选项，验证工作得非常好。表单正在以应有的方式进行验证。但是，如果我改变主意并从下拉列表中选择不同的选项，则表单不再正确验证。提交时，我看到该表单正在按照之前表单的要求进行验证。

查看控制台上的$("#MyForm").validate() 对象，invalid 以及submitted 属性仍然保存先前表单的信息。每当新的 ajax 调用加载新的表单元素时，重置验证器的最简单方法是什么？

我尝试使用$("#MyForm").validate().resetForm(); 重置表单，但没有清除上述属性。

按照this stackoverflow-post 中的建议尝试清除验证也没有为我解决问题。

【问题讨论】：

您确定.resetForm() 不起作用吗？如果使用得当，它会完全重置验证插件，就像重新加载页面一样。如果为真，则构建一个有效的 jsFiddle 演示，并在其 Github 页面上将此作为错误报告给开发人员。
感谢@Sparky - 将使用 .resetForm() 运行更多测试。

标签： javascript jquery jquery-validate

【解决方案1】：

每当新的 ajax 调用加载新的表单元素时，重置验证器的最简单方法是什么？

在 Ajax success 回调中，remove all static rules from an element

$("#MyForm").rules( "remove" );
// Then add or re-add some static rules...

抱歉...无法轻松地为演示重新创建它。

【讨论】：