jQuery Validate动态创建的数组输入元素

我有一个表单，我想使用jQuery Validation插件进行validation 。 我目前在输入元素与数组（ name="inputname[]" ）有问题，这是使用jQuery .on()动态创建的。 让我解释一下这个问题：

1. 有一个表单，其中一个输入文本名为name[] 。
2. 有一个按钮可以添加更多输入文本，这个元素用.on（）执行。 我点击了2到3次，因此会有超过1个输入文本。
3. 我单击提交，表单正确validation但它只validation第一个创建的数组元素而不是另一个元素。

对于完整代码，我在这里创建了一个jsfiddle： http ： //jsfiddle.net/ThE5K/4/

jQuery ：

 $(document).ready(function () { // MODE 1 // With [] or array name <<<< this one is not working $("#addInput").on('click', function () { $('#inputs').append($('')); }); /* MODE 2 Without [] or array name <<<< this one is working var numberIncr = 1; $("#addInput").on('click', function () { $('#inputs').append($('')); numberIncr++; }); */ $('form.commentForm').on('submit', function (event) { $('input.comment').each(function () { $(this).rules("add", { required: true }) }); event.preventDefault(); console.log($('form.commentForm').valid()); }) $('form.commentForm').validate(); }); 

HTML ：

 
 
  add element  

我在其中创建了两种模式，即工作模式（没有数组名称的动态输入文本）和不工作模式（具有数组名称的动态输入文本）。

我一直在寻找那些解决方案，但遗憾的是他们中没有人工作过：

• jqueryvalidation为数组输入添加规则
• jquery validate不支持动态内容
• jQueryvalidation动态输入数组

请帮忙。

Answer 1

关于创建新字段的代码：

 // Mode 1 $("#addInput").on('click', function () { $('#inputs').append($('')); }); 

“模式1”无法正常工作的全部原因是因为您为每个新input分配了相同的名称属性name="name[]" 。 jQuery Validate插件绝对要求每个input元素都具有唯一的 name属性。 只需在name[]使用numberIncr变量即可确保此唯一名称。

此外，您真的不应该在submit添加规则。 submit事件通常是检查所有规则的地方，因此此时添加规则并没有多大意义。 创建新输入字段时，应添加新规则。

对于你的简单情况， rules('add')方法对此无论如何都是过度的，你可以完全消除你的.on('submit')处理程序。 由于规则是required ，您只需在新的input元素中添加class="required"即可。

这是工作代码：

jQuery ：

 $(document).ready(function () { // MODE 1 var numberIncr = 1; $("#addInput").on('click', function () { $('#inputs').append($('')); numberIncr++; }); $('form.commentForm').validate(); }); 

演示： http ： //jsfiddle.net/ThE5K/6/