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()

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

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

1 个答案: