使用 jquery 验证动态输入字段

Posted 2023-05-09

【中文标题】使用 jquery 验证动态输入字段

【英文标题】：Validating Dynamic input fields with jquery

【发布时间】：2015-02-24 10:43:45

【问题描述】：

大家好，我正在尝试验证将由用户使用链接按钮动态生成的输入字段，以使用户添加更多输入字段，但我遇到的问题是它只有第一个经过验证的字段，但动态生成的输入字段无效。 这是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--;


);

【问题讨论】：

不要多次使用同一个“id”属性。

谢谢 Barmar 先生，我已经按照你说的做了，但我仍然无法验证用户生成的动态输入字段

【参考方案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>');
    
);