Jquery Validate dynamic multiple rows column fields array validation

Question

In my application user can create N-number of rows in table, each rows having 5 columns. Columns contains text fields and selectbox. Each elements should have to validate. I'm using jquery validation. When user click on add row button current row should get validate with jquery validation.

My code likes,

insertnewRelationship : function(relationship)
    {
            var relationoption = "<option value='-1'> -Select- </option>";
            $.each(relationship, function(key,value) {
                relationoption += "<option value='"+value.id+"'>"+value.name+"</option>";
            });
            var row = "<tr><td><input type='text' name='fv[cus_rel][name][]' value='' /></td><td><input type='text' name='fv[cus_rel][mobile][]' value='' /></td><td><input type='text' name='fv[cus_rel][email][]' value='' /></td><td><input type='text' name='fv[cus_rel][dob][]' value='' data-field='date' /><div class='dtBox'></div></td><td><select name='fv[cus_rel][relationship][]' id='fv[cus_rel][relationship]'>"+relationoption+"</select></td><td><a href='javascript:void(0);'><img class='addimg' src='"+base_url+"assets/images/gtk-add.png' alt='add' /></a></td></tr>";
            $('#relationshiplist tbody').append(row);

        $('.addimg').on("click", function() {
            dashboardclass.relationshipdet_validation();
            if($('#relationship_form').valid())
            {
                $(this).attr('src',base_url+"assets/images/icon-delete.png");
                $(this).attr('class',"deleteimg");
                dashboardclass.insertnewRelationship(relationship);
            }

        });
        $('.deleteimg').on("click", function() {
            $(this).parent().parent().parent().remove();
        });
        $(".dtBox").DateTimePicker();
    }

My validation function likes,

relationshipdet_validation : function()
    {
        $('#relationship_form').validate({
            rules: {
                "fv[cus_rel][name][]": {
                    required : true,
                    minlength : 4
                },
                "fv[cus_rel][mobile][]" : {
                    required : true,
                    minlength : 4
                },
                /*"fv[cus_rel][email][]" : {
                    required : true,
                    email : true
                },*/
                "fv[cus_rel][dob][]" : {
                    required : true
                },
                "fv[cus_rel][relationship][]" : {
                    selectcheck : true
                }
            },
            highlight: function(element) {
                $(element).attr('placeholder','Please Enter Value');
                $(element).closest('.control-group').removeClass('success').addClass('error');
                $(element).closest('.control-group').html("required");
            },
            success: function(element) {
                element
                    //.text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('error');
            }
        });
            jQuery.validator.addMethod('selectcheck', function (value) {
                return (value != '-1');
            }, "Required");
    }

Now what happens means getting validate, but validation error messages displaying at first row. I mean when we check for second or third rows(grater than first row) validation messages are displaying at first row columns instead of current row. Please any one help me to get expect result.

When i check for first time click on add button

It's working well for first row, Bur for second row validation msg display at first row like bellow

Answer 1

The problem is validate.js only validates the first element with name eg: myName[] We need to edit a function checkform in validate.js in order to fix it.

checkForm: function() {
    this.prepareForm();
    for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
        if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
            for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
                    this.check( this.findByName( elements[i].name )[cnt] );
            }
        } else {
            this.check( elements[i] );
        }
    }
    return this.valid();
}

Demo fiddle: https://jsfiddle.net/abhiklpm/6fmk3d0v/

Reference : http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/

Answer 2

One way

When your are creating the new row on button click add

data-rule-required="true"

on every field you what to validate

for example:

var row = "<tr><td><input type='text' name='fv[cus_rel][name][]' value='' data-rule-required="true"/></td>...

similarly for all the fields including select

OR

another way

$('input,select').rules('add', 'required');

put this in the event that generates the new row