使用jquery驗證動態輸入字段

Question

嘿傢伙我試圖驗證輸入字段，將由用戶動態生成一個鏈接按鈕，使用戶添加更多的輸入字段，但我遇到的問題是，它只有第一個字段驗證但動態生成的輸入字段不驗證。
這裏的HTML代碼：

<form id="testform" method="post"> 
    <div style="margin-top: 10px;" id="within_nigeria1"> 
     <div id="divint1">Address(s) within Nigeria: <a href="" id="add_field_button">Add more field</a> 

      <input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text[]" /> 
      <div class="wn"></div> 
     </div> 
    </div> 
    <input type="submit" value="submit" /> 
</form> 

這裏是jQuery的代碼：

$('#testform').validate({ 
    rules: { 
     "address_text[]": { 
      required: true 
     } 
    } 
}); 

var max_fields = 5; //maximum input boxes allowed 
var wrapper = $("#within_nigeria1"); //Fields wrapper 
var add_button = $("#add_field_button"); //Add button ID 
var wrapper1 = $(".wn"); 


var x = 1; //initlal text box count 
$(add_button).click(function (e) { //on add input button click 
    e.preventDefault(); 

    if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     $(wrapper1).append('<input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text[]"/><a href="" class="remove_field">Remove</a>'); 
    } 
}); 

$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    x--; 


}); 

Answer 1

jquery.validate要求每個輸入有唯一的名稱。因此，不需要像

name="address_text[]" 

您需要將明確的計數器放入括號中。最初的HTML應該使用name=address_text[0]，添加行的Javascript可以增加它。

var counter = 0; 

$(add_button).click(function (e) { //on add input button click 
    e.preventDefault(); 

    if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     counter++; 
     $(wrapper1).append('<input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text['+counter+']"/><a href="" class="remove_field">Remove</a>'); 
    } 
});