Question

在我的应用程序中，用户可以在表中创建N行，每行有5列。列包含文本字段和选择框。每个元素都必须验证。我正在使用jquery验证。当用户单击添加行按钮时，当前行应通过jquery验证进行验证。

我的代码喜欢，

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

我的验证功能喜欢，

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");
    }

现在发生的事情意味着获得验证，但验证错误消息显示在第一行。我的意思是当我们检查第二行或第三行（比第一行更大）时，验证消息显示在第一行而不是当前行。请任何人帮助我获得期望的结果。

当我第一次检查时，点击添加按钮 enter image description here

它适用于第一行，Bur用于第二行验证msg显示在第一行，如bellow enter image description here

Answer 1

问题是validate.js只验证带有名称的第一个元素，例如：myName[]我们需要编辑validate.js中的函数checkform以便修复它。

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

演示小提琴： https://jsfiddle.net/abhiklpm/6fmk3d0v/

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

Answer 2

One way

当您在按钮上创建新行时，请单击添加

data-rule-required="true"

在每个字段上验证什么

例如：

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

同样适用于所有字段，包括select

OR

another way

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

将此信息放入生成新行

的事件中

Jquery验证动态多行列字段数组验证

2 个答案: