jqueryvalidationdynamic表单input无效的插件

我有一个表单，我有一些领域，然后如果需要用户可以添加更多的相同types的字段。 即时通讯使用http://jqueryvalidation.org/validation插件来validation字段。

当我读的地方jqueryvalidation插件需要唯一的名称字段validation它们。 所以我特别命名每个领域。 首先，我希望validation插件将负责dynamic添加元素的validation，如果我使用类添加规则。 但事实certificate，事实并非如此。

因此，即使每个字段的名称是唯一的，validation插件仅validation最初呈现的第一个input。

我甚至试图使用$ .clone（） ，希望它会照顾所有的事件绑定。 但它没有为我工作。 所以我移动到下划线重复标记，因为有很多字段，我不想写在JS中的模板和相应的名称。

我无法find解决scheme，并卡在这里。 在解决此问题之前，不能再继续。

这是我写的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; }); 

请在小提琴设置中find标记。

示例和代码在这里设置

Answer 1

当使用这个插件的方法之一，如.rules() ，并针对多个元素，如一个class ，您还必须使用jQuery .each()方法。

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

而且，您不能在DOM中尚不存在的元素上使用.rules() 。 只需将.rules()方法移动到创build新input的函数中。

 $("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 }); }); }); 

工作演示： http : //jsfiddle.net/Yy2gB/10/

---

但是，只需定位一个新字段 ，而不是使用work_emp_name class的所有字段，就可以使其效率更高 。

 $("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; }); 

工作演示： http : //jsfiddle.net/Yy2gB/11/

---

我上面的两个例子都是为dynamic创build的字段添加规则。 你仍然需要在dom准备好后为你的静态域声明任何规则，如下所示：

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

Answer 2

返回第一个选定元素的validation规则，或者添加指定规则并返回第一个匹配元素的所有规则。 需要validation父表单，也就是说，首先调用$（“form”）.validate（）

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

 function addRule(id){ $("[name='work_emp_name["+id+"]']").rules("add", { required: true }); } $("#work_form").validate(); addRule(0); _.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)); addRule(counter); counter += 1; }); here 

Answer 3

这是因为jQueryvalidation只validation当前数组的第一次出现。

你可以在插件上检查我的提交 ，只要命名的数组发生任何事情就可以正常工作。