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

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() 方法。选择“以”reg_number... 开头的所有 name 属性

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

演示:jsfiddle.net/43b19sq3/

注意:

除了复选框和单选按钮组之外，您不能使用此插件在 form 内的多个元素上使用相同的名称 。换句话说，您不能在多个元素上使用 reg[]。但可以使用索引号并具有 reg[0]、reg[1] 等。

参见Markup Recommendations in the docs :

"Mandated: A 'name' attribute is required for all input elements needing validation, and the plugin will not work without this. A 'name' attribute must also be unique to the form, as this is how the plugin keeps track of all input elements. However, each group of radio or checkbox elements will share the same 'name' since the value of this grouping represents a single piece of the form data."