javascript - 使用 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>');
    }
});