我有一个有效的表单验证，但现在我也想验证动态添加的字段

Question

我在 jquery 中有一个完整的工作验证，你可以在这里查看

现在我决定添加一种可能性，即向我的表单添加新的 'rows'，我也想以与原始行相同的方式进行验证。我已经有了一个动态添加字段的工作代码（请参阅此处：http://jsfiddle.net/7yd5o63q/21），但我不知道如何将验证插入到尚未创建的字段中。目前我正在通过此代码附加另一行：

$("#add_row").click(function(){
    $('#listOfCommercials').append('<div id="singleCommercial'+i+'"></div>');
    $('#singleCommercial'+i).html('<div class="form-group"> <label>Where do you want to go today?</label> <div class="col-lg-12"> <div class="col-lg-6"> <div class="checkbox"> <label> <input type="checkbox" value="" name="a'+i+'">a</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="b'+i+'">b</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="c'+i+'">c</label> </div>  </div> <div class="col-lg-6"> <div class="checkbox"> <label> <input type="checkbox" value="" name="d'+i+'">d</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="e'+i+'">e</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="f'+i+'">f</label> </div></div> </div> </div> <div class="form-group"> <label>When do you want to go?</label> <input type="text" class="form-control" id="datetimepicker'+i+'" name="appearanceDate'+i+'"/> </div> <div class="form-group"> <label>How long should your trip last?</label> <select class="form-control" name="duration'+i+'"> <option>5 days</option> <option>10 days</option> <option>15 days</option> <option>20 days</option> <option>30 days</option> </select> </div>');

   i++; 
   alert(i);
});

所以我想这部分必须修改，但我什至不知道如何开始接触它，你能帮我吗？谢谢！

Answer 1

您需要添加规则来验证新添加的输入以及 DOM 元素。尝试使用类似的东西：

$("#add_row").click(function(){
    $('#listOfCommercials').append('<div id="singleCommercial'+i+'"></div>');
    $('#singleCommercial'+i).html('<div class="form-group"> <label>Where do you want to go today?</label> <div class="col-lg-12"> <div class="col-lg-6"> <div class="checkbox"> <label> <input type="checkbox" value="" name="a'+i+'">a</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="b'+i+'">b</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="c'+i+'">c</label> </div>  </div> <div class="col-lg-6"> <div class="checkbox"> <label> <input type="checkbox" value="" name="d'+i+'">d</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="e'+i+'">e</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="" name="f'+i+'">f</label> </div></div> </div> </div> <div class="form-group"> <label>When do you want to go?</label> <input type="text" class="form-control" id="datetimepicker'+i+'" name="appearanceDate'+i+'"/> </div> <div class="form-group"> <label>How long should your trip last?</label> <select class="form-control" name="duration'+i+'"> <option>5 days</option> <option>10 days</option> <option>15 days</option> <option>20 days</option> <option>30 days</option> </select> </div>');

    $('input[name="a'+i+'"]').rules("add", {  // <- apply rule to new field
        required: true
    });    

    i++;
    alert(i);
});

您仍然需要在 dom 准备好后为您的静态字段声明任何规则，如下所示...

$("#work_form").validate({
    errorElement: 'div',
        rules: {
            "number[]": "at_least_one",
            datetimepicker: {
                required: true,
                date: true
            },
            commercialText: {
                required: true,
                minlength: 5
            },
            terms: {
                required: true,
                maxlength: 2
            }
        },
});

基于 Sparky 在这里的回答：jquery validate plugin on dynamic form inputs not working

我有一个有效的表单验证，但现在我也想验证动态添加的字段

I have a working form validation, but now I want to validate dynamically added fields too

jquery

jquery-validate