javascript - 使用 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 Form Validation Plugin为此目的，我正在寻找一种方法来完成相同的解决方案。任何帮助将不胜感激。

Answer 1

如果所有字段都将具有相同的验证，那么您可以尝试添加一个通用类名并使用 rules() 函数添加规则。

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

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

$('.commonclass').rules()

此函数调用将返回所有分配规则的对象。