how to validate array input using jquery-validate

Question

I have an array input field and I am trying to use jquery validate but it is not working. http://jsfiddle.net/shorif2000/hfrhs/196/

It is possible to have multiple of the following input fields.

<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');
                }
            });
        //});
        }
    });

I have tried to follow this post How to validate array of inputs using validate plugin jquery but it is not working.

Answer 1

You cannot do as you attempted here...

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

There is no such thing as inserting a * as a wildcard in a JavaScript variable.

To make the process of declaring rules less tedious, you can use a jQuery .each() in combination of the .rules() method of this plugin. Select all the name attributes "starting with" 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/

NOTE:

With the exception of checkbox and radio groups, you cannot have use same name on more than one element within the form using this plugin. In other words, you cannot have reg[] on multiple elements. But can use an index number and have reg[0], reg[1], etc.

See 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."