使用jquery表单验证插件验证动态生成的字段(通过条件脚本)

Question

我有一个表单，在这个表单中，在选择一个选项的基础上生成了几个字段，即一个以数字为值的下拉列表，在这个数字（计数）的基础上，生成并附加了几个字段。我已经包含了对其他字段的验证，但没有针对这些生成的字段。

我的场景示例

$('select.select-dependent').change(function(){
    var sel_value = $('select.select-dependent').val();      
    if(sel_value==0)
    {   
        //Resetting Dependends Section      
        $("#dependent-show-area").empty();
        $("#dependent-show-area").css({'display':'none'});
    }
    else{
        //Resetting Field Section 
        $("#dependent-show-area").empty();
        //Below Function Creates Input Fields Dynamically 
        create(sel_value);
    }   
});

function create (sel_value) {
    for(var i=1;i<=sel_value;i++) {
                    html +=     '<div class="row">';    
        html +=     '<div class="col-xs-12 col-md-6">';
        html +=     '<label>Field 1 label</label>';
        html +=     '<input class="form-control" type="text" name="field1[]"/>';
        html +=     '</div>';
        html +=     '<div class="col-xs-12 col-md-6">';
        html +=     '<label>Field 2 label</label>';
        html +=     '<input class="form-control" type="text" name="field2[]"/>';
        html +=     '</div>';
        html +=     '</div>';
        html +=     '<div class="row">';
        html +=     '<div class="col-xs-12 col-md-6">';
        html +=     '<label>Field 3 label</label>';
        html +=     '<input class="form-control" type="text" name="field3[]"/>';
        html +=     '</div>';
        html +=     '<div class="col-xs-12 col-md-6">';
        html +=     '<label>Field 4 label</label>';
        html +=     '<input class="form-control" type="text" name="field4[]"/>';
        html +=     '</div>';
        html +=     '</div>';
        $("section#id-to-append").append(html);
    }
}

在上面的代码中，create（）函数创建了几个字段，并将其附加到我表单中的一个部分，这是在循环中完成的。我一直在努力寻找一种方法来验证这些生成的字段。

我已经尝试了下面的方法来验证，但它似乎不起作用

   var settings = $("#my-form").validate().settings;
   $.extend(settings, {
             rules: {
                'field1[]': {
                    required: true
                },
                'field2[]': {
                    required: true
                },
                'field3[]': {
                    required: true
                },
                'field4[]': {
                    required: true
                }
            },
     });

请注意，我使用jQuery表单验证插件是为了这个目的，我正在寻找一种方法来完成同样的解决方案。任何帮助都将不胜感激。

Answer 1

如果所有字段都要进行相同的验证，那么您可以尝试添加一个公共类名，并使用rules（）函数添加规则。

$( ".commonclass" ).rules( "add", {
    required: true
});

此外，如果您怀疑规则是否已分配，请使用以下代码查找，

$('.commonclass').rules()

此函数调用将返回一个具有所有指定规则的对象。