Javascript 动态表单输入上的jquery验证插件不工作

我有一个表单，其中有一些字段，如果需要，用户可以添加更多相同类型的字段。我用它来验证字段

正如我在某处读到的，jqueryvalidate插件需要字段的唯一名称来进行验证。因此，我将每个字段命名为唯一的。首先，如果我使用类添加规则，我希望validate插件能够处理动态添加的元素的验证。但事实证明并非如此

所以，即使每个字段的名称都是唯一的，validate插件也只验证最初呈现的第一个输入

我甚至尝试使用，希望它能处理所有事件绑定。但这对我不起作用。因此，我移动到下划线以重复标记，因为有许多字段，我不想用JS和相应的名称编写模板

我找不到解决办法，就被困在这里。在这个问题得到解决之前，我们无法继续讨论

这是我写的JS

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

$(".work_emp_name").rules("add", {
    required: true
});

_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());

var counter = 1;

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    counter += 1;
});

请在小提琴设置中找到标记

---

返回第一个选定元素的验证规则或 添加指定的规则并返回第一个匹配元素的所有规则。要求验证父窗体，即，$（“窗体”）。首先调用validate（）或

删除指定的规则并返回第一个匹配元素的所有规则。

---

当使用此插件中的某个方法（如

.rules（）

）并针对多个元素（如

类

）时，还必须使用jQuery

.each（）

方法

$('.work_emp_name').each(function () {
    $(this).rules("add", {
        required: true
    });
});

并且不能对DOM中尚不存在的元素使用

.rules（）

。只需将

.rules（）

方法移动到创建新输入的函数内部

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    counter += 1;
    $('.work_emp_name').each(function () { 
        $(this).rules("add", {
            required: true
        });
    });
});

工作演示：

---

但是，您可以通过只针对一个新字段，而不是所有具有

工作\u emp\u名称的字段来提高效率

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));   // <- add new field
    $('input[name="work_emp_name['+counter+']"]').rules("add", {  // <- apply rule to new field
        required: true
    });
    counter += 1;
});

这是因为jQuery验证只验证当前第一次出现的数组

您可以在插件上检查my，该插件在命名数组的任何事件上都能正常工作。
想法正确，但似乎有点过于冗长。@jsfiddle.net/Yy2gB/9您的示例中的Sparky基本上与我做了相同的事情，只是它只在新元素上工作，而不是在现有元素上。我的疏忽。可以在初始化页面时或通过内联HTML声明现有页面。修正了我的答案。谢谢。帮助我的是
需要验证父窗体…
在添加规则之前，必须在窗体上运行
.validate（）
，否则它将无法工作。谢谢，@nzn只是为了节省时间（或者现在），我刚刚在模板本身中添加了
数据规则required=“true”
。这还强制对动态元素执行验证规则。我有8个字段，单击“添加雇主”按钮（名称、工作范围、开始和结束日期、约会信等），这些字段就会重复出现。因此，如果我想向这些字段添加规则，那么我必须在
addemployer
单击listener中编写相同的代码。太多了。相反，我选择了data attributes方法来添加验证规则。但通过data attributes添加规则并不能提供更多的控制，就像是否有任何字段依赖于其他字段的值一样。因此，您的答案也适用于所有这些场景，并提供了更多的控制。所以这是正确的方法。谢谢你花时间来解决这个问题。也许这是一个模糊的问题，但是像validate这样的插件不应该使用
$来处理动态添加的字段或添加带有类的规则。每个
都放在第一位吗？现在我知道它写得很好，有很多选择，但我的意思是这些是插件应该具备的基本功能。@SachinG，这取决于每个开发人员。对于此插件，您必须
.each（）
。您能否展开您的答案，说明如何为这些动态规则设置自定义验证消息？但您给出的示例中的验证不起作用。@SukhwinderSodhi它确实起作用。第一个验证很好，但当添加新雇主时，您保存它而不填充另一个雇员时，它会保存该消息data@SukhwinderSodhi请参考答案，因为你所说的是我需要解决的问题。
$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));   // <- add new field
    $('input[name="work_emp_name['+counter+']"]').rules("add", {  // <- apply rule to new field
        required: true
    });
    counter += 1;
});

$("#work_form").validate({
    rules: {
        "work_emp_name[0]": {
            required: true
        }
    }
});