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')方法在创建新的输入字段后由于您没有显示任何添加新字段的代码，因此我无法向您展示该技术的确切演示。

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

http://jsfiddle.net/WVbmj/

引用OP：

它仍然验证表单，但我得到奇怪的结果。有时，filed3 中的 onsubmit 值会移至 field2，并且规则也会在字段之间传递。

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

同样，当这个问题解决 后它就可以工作了： http://jsfiddle.net/WVbmj/id