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変数にワイルドカードとして*を挿入するようなものはありません。

ルールを宣言するのが面倒でないようにするには、このプラグインの.rules()メソッドの組み合わせでjQuery .each()を使用できます。 ... 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", 
     } 
    }) 
}); 

DEMO：jsfiddle.net/43b19sq3/

注：チェックボックスとラジオグループの例外を除いて

、あなたすることはできませんこのプラグインを使用してform内の複数の要素で同じnameを使用してください。つまり、reg[]を複数の要素に含めることはできません。

「マンデート： 『名前』属性が検証を必要とするすべての入力要素のために必要とされ、プラグインが動作しません。しかし

はMarkup Recommendations in the docsを参照してください

など、インデックス番号を使用して reg[0]、 reg[1]を持つことができます 'name'属性は、の形式でも一意でなければなりません。これは、プラグインがすべての入力要素を追跡する方法であるため、ラジオまたはチェックボックス要素の各グループは、このグループのうちの1つは、フォームデータの1つの部分を表します。