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>