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

Question

I have a form where few fields are generated on the basis of selecting an option, ie, a dropdown which has number as value, on the basis of this number(being the count) few fields are generated and appended in loop. I've included validation of the other fields, but not for these generated fields.

An example of my scenario,

$('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);
    }
}

In the above code the create() function creates few fields and appends it to a section in my form, this is done in a loop. What I've been trying is to find is a way to validate these generated fields.

I've tried the below method to validate but it doesn't seem working

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

Please note that I'm using jQuery Form Validation Plugin for this purpose and I''m looking for a way to accomplish a solution with the same. Any help will be much appreciated.

Answer 1

If all the fields are going to have the same validation then you can try adding a common class name and use rules() function to add rules.

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

Also if you have doubt whether the rule is assigned or not, use the following code to find it out,

$('.commonclass').rules()

this function call will return an object of all assigned rules.