使用动态添加到表单的字段进行 jQuery 验证

Question

我有以下表格:

<form class="form-validation">
  <input name="product[0][name]" id="form_product[0][name]" data-rule-required="true">
</form>

使用 jQuery 验证插件进行验证。我这样调用它:

$(".form-validation").validate();

验证按预期进行。然后我有一个按钮可以动态地将字段添加到表单中，基本上它会创建以下内容:

<form class="form-validation">
  <input name="product[0][name]" id="form_product[0][name]" data-rule-required="true">
  <input name="product[1][name]" id="form_product[1][name]" data-rule-required="true">
  <input name="product[2][name]" id="form_product[2][name]" data-rule-required="true">
  ...
</form>

现在，经过此验证后，行为不再正常。它仍然验证表单，但我得到奇怪的结果。有时，filed3 中的 onsubmit 值会移动到 field2，并且规则也会在字段之间传递...

我想我需要告诉验证器新字段已添加，但我不知道如何？

Answer 1

要将规则应用于动态创建的字段，您可以调用 rules('add') method创建新输入字段后立即。由于您没有展示任何添加新字段的代码，因此我无法向您展示该技术的精确演示。

但是，由于您的规则已经是 HTML 属性的一部分，因此下面的演示表明您的代码应该已经可以正常工作:

<强> http://jsfiddle.net/WVbmj/

<小时/>

引用OP:

It still validates form but I get strange results. Sometimes onsubmit value from filed3 is moved to field2, and rules are passed between fields as well.

这可能是因为您的第二个和第三个输入上有重复的id，id="form_product[1][name]" > 元素。 id 必须是唯一的，否则你会得到像这样的奇怪结果。像我在上面的演示中一样解决这个问题。

再次强调，当这个 id 问题得到解决后，它就可以工作了: http://jsfiddle.net/WVbmj/