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

此函數調用將返回所有已分配規則的對象。