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> 

现在，此验证后，行为不再OK了。它仍然验证窗体，但我得到奇怪的结果。有时来自filed3的onsubmit值会移至field2，并且规则也会在字段之间传递...

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

Answer 1

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

然而，由于你的规则已经是HTML属性的一部分，下面这个演示表明，你的代码应该已经做工精细：

http://jsfiddle.net/WVbmj/

---

报价OP：

它仍然验证窗体，但我得到奇怪的结果。有时，来自filed3的提交 值将移至field2，并且规则也将在 字段之间传递。

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

再次，它的工作在这个id问题是固定的：http://jsfiddle.net/WVbmj/

Answer 2

为了验证动态字段，我们需要添加类来动态控制和附加规则，它

，我们需要重复此操作为每个附加操作..

<input id="Name" name="Name" type="text" class="netEmp form-control"> 

欲了解更多信息，请点击这里http://www.dotnetqueries.com/Article/136/jquery-validate-dynamically-added-fields

Answer 3

您应该为所有字段设置相同的类名称。

例如：

<input class="form-control amount validate_form" name="amount[]" type="text"> 
<p class="validateError" style="color:red;display:none;">please enter amount.</p> 
<button type="submit" id="fees_stream_submit" class="btn btn-primary">Submit</a> 

<script type="text/javascript"> 
      $(document).on('click', '#fees_stream_submit', function(e){ 
       e.preventDefault(); 
       $(".validate_form").each(function() { 
        var selectedTr = $(this); 
        i =0; 
        var value = $(this).val(); 
        if (!value) { 
         selectedTr.next("p").show(); 
         i++; 
        } else { 
         selectedTr.next("p").hide(); 
        } 
       }); 

       if (i == 0) { 
        $('#fees_stream_form').submit(); 
       } 
      }); 
     </script>