Question

我在jquery中有一个完全有效的验证，你可以在这里查看

现在我决定添加一个向表单添加新“行”的可能性，我也希望以与原始行相同的方式验证。我已经有了一个添加动态字段的工作代码（参见这里：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

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

1 个答案: