Question

我有一个数组输入字段，我正在尝试使用jquery验证，但它无法正常工作。 http://jsfiddle.net/shorif2000/hfrhs/196/

可以有多个以下输入字段。

<form name="frmCreateCM" id="frmCreateCM" method="post" accept-charset="utf-8" class="form-horizontal">
    <input size="15" maxlength="20" name="src[0]" class="form-control">
    <input size="15" maxlength="20" name="src[1]" class="form-control">
    <input size="15" maxlength="20" name="src[2]" class="form-control">
    <input size="15" maxlength="20" name="src[3]" class="form-control">
</form>

$.extend( $.validator.prototype, {
    checkForm: function () {
        this.prepareForm();
        console.log(this);
        for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
            console.log(elements[i].name);
            console.log(this.findByName(elements[i].name).length);
            console.log(elements[i]);
            //if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) {
            if(true){
                console.log(this.findByName(elements[i].name));
                for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) {
                    console.log(this.findByName(elements[i].name)[cnt]);
                    this.check(this.findByName(elements[i].name)[cnt]);
                }
            } else {
                var el = this.findByName(elements[i].name);
                this.check(elements[i]);
            }
        }
        return this.valid();
    }
});
$("form[name='frmCreateCM']").validate({

        rules: {
            "src[]" : {
                required: true
            },
            "srcport[]" : {
                required: true
                },
            "dst[]" : {
                required: true
                },
            "dstport[]" : {
                required: true
                }
        },
        showErrors: function(errorMap, errorList) {
            console.log(errorMap);
            console.log(errorList);
            $.each( this.successList , function(index, value) {
                $(value).popover('hide');
            });
            $.each( errorList , function(index, value) {

                 var _popover = $(value.element).popover({
                    trigger: 'manual',
                    placement: 'top',
                    content: value.message,
                    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"></div></div></div>'
                });
                 _popover.data('bs.popover').options.content = value.message;
                 $(value.element).popover('show');
            });
        },
        submitHandler: function (form) {
        //submit(function(e){
            //e.preventDefault();
            //fix timer
            $("#addRow").addClass('disabled');
            $("#btnCreateCM").css('width','110px');
            $("#btnCreateCM").css('background','#aaaaaa');
            $("#btnCreateCM").css('border','1px solid #676767');
            startTimer('btnCreateCM');
            document.getElementById("btnCreateCM").disabled = true;

            var formdata = $('form').serialize();
            formdata += "&csrf="+$.csrfParam('csrf') ;
            $.post('/api/admin/add/comms/matrices/format/json/',formdata, function( msg ) {
                stopTimer();
                if(msg.header.error){
                    $("#myModalError .modal-body").html(msg.header.message);
                    $("#myModalError").modal('show');
                }else{
                    $("#view_comms_matrix").attr('href','/api/user/commsmatrix/id/'+msg.body.recordset.record.comms_matrix_id+'/format/xml?csrf='+$.csrfParam('csrf'));

                    var html = '<table class="table table-striped table-bordered table-hover table-condensed">'+
                    '<tr><td>Analysis Start</td><td>'+msg.header.metadata.analysis_start+'</td></tr>'+
                    '<tr><td>Analysis End</td><td>'+msg.header.metadata.analysis_end+'</td></tr>'+
                    '<tr><td>Analysis Time</td><td>'+msg.header.metadata.analysis_time+'</td></tr>'+
                    '<tr><td>Upload Status</td><td>'+msg.header.upload_status+'</td></tr>';
                    if(msg.header.error_flows > 0){
                        html += '<tr><td style="width: 120px; vertical-align: text-top; font-size: 14px; border-right: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; padding-right: 25px; color: #ef0000;">Row Input Errors</td><td style="font-size: 14px; border-right: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; padding-right: 25px; color: #ef0000;">'+msg.header.error_flows+'</td></tr>';
                    }
                    html += '</table>';

                    $('#myModalCreate .modal-body').html(html);
                    ga('send', 'event', 'Comms Matrices', 'Create', msg.body.recordset.record.comms_matrix_id);

                    $("#myModalCreate").modal('show');
                }
            });
        //});
        }
    });

我试图关注此帖How to validate array of inputs using validate plugin jquery，但它无效。

Answer 1

你不能像在这里尝试那样做......

$("form[name='frmCreateCM']").validate({
    ....
    rules: {
        'reg_number[*]': {
         ....

没有在JavaScript变量中插入*作为通配符。

要使声明规则的过程不那么繁琐，可以将jQuery .each()与此插件的.rules()方法结合使用。选择以“name ...

开头的所有reg_number属性”

$('[name^="reg_number"]').each(function() {
    $(this).rules('add', {
        required: true,
        minlength: 2,
        messages: {
            required: "Enter Reg Number",
            minlength: "Enter at least {0} characters",
        }
    })
});

DEMO：jsfiddle.net/43b19sq3/

注意：

除了复选框和广播组，使用此插件在name内的多个元素上使用相同的form。换句话说，您不能在多个元素上使用reg[]。但是可以使用索引号并使用reg[0]，reg[1]等

请参阅Markup Recommendations in the docs：

“强制要求：所有需要验证的输入元素都需要'name'属性，如果没有这个，插件将无效。'name'属性对于表单也必须是唯一的，因为这就是插件跟踪所有输入元素的方式。但是，每组radio或checkbox元素将共享相同的“名称”，因为此分组的值代表表单数据的单个部分。“

如何使用jquery-validate验证数组输入

1 个答案: