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 enter image description here

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

abhiklpm · Accepted Answer · 2015-02-12 11:01:38Z

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/

logan Sarav · Accepted Answer · 2014-08-08 12:19:31Z

0

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

edited Aug 8, 2014 at 12:19

answered Aug 8, 2014 at 11:45

logan Sarav

7816 silver badges27 bronze badges

3 Comments

Vinoth Kumar Over a year ago

I used this date-rule-required="true" but it didn't worked for me

Vinoth Kumar Over a year ago

I'm getting error like Uncaught TypeError: Cannot read property 'nodeName' of null.

Vinoth Kumar Over a year ago

Validation happens, but error message are not displaying for current validation row, it's displaying at first row

Collectives™ on Stack Overflow

Jquery Validate dynamic multiple rows column fields array validation

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related