jQueryで動的に追加されたフィールドを動的に検証する

Question

フィールドの有効性を確認するには、nameとidが必要です。

私の問題は、フォームに追加するフィールドを繰り返し追加する必要があるということです。これは同じname（サーバーサイドで読むことができるように）になります。

結果として、動的に追加された最初のフィールドのみが検証され、その他のフィールドは検証されず、空でもサブミットされます。ここで

は、私の基本的なセットアップのサンプルです：http://jsfiddle.net/kneidels/07m6bru2/

は、このための回避策のいくつかの種類がありますか？

Answer 1

これはクリーンな解決策ではないかもしれないが、可能な回避策、変数でカウントし、各時間は次のように新しいコントロールID /名前を作成して入力フィールドを保つ：

$(document).ready(function() { 
var controlNumber = 4; //assume you have 3 controls in form 
$('#myform').validate({ // initialize the plugin  
    submitHandler: function (form) { // for demo 
     alert('valid form submitted'); // for demo 
     return false; // for demo 
    } 
}); 

$('button').one('click', function() { 
    var ctl = '<input name="product['+controlNumber+'][name]" id="form_product[3][name]" data-rule-required="true">';   
    $('#myform').append(ctl); 
    controlNumber++; 
}); 
});