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[*]': { 
     .... 

자바 스크립트 변수에 와일드 카드로 *를 삽입 같은 건 없다.

규칙을 선언하는 과정을 지루하게 만들려면이 플러그인의 .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[]을 가질 수 없습니다. A '이름'속성이 검증을 필요로하는 모든 입력 요소에 필요하며, 플러그인이 작동하지 않습니다 :

"의무적 : 그러나 인덱스 번호를 사용 할 수 있습니다 reg[0], reg[1] 등

이 Markup Recommendations in the docs를 참조해야 'name'속성도 양식에 고유해야합니다. 플러그인이 모든 입력 요소를 추적하는 방식이기 때문에 라디오 또는 체크 박스 요소의 각 그룹은 값이 같기 때문에 동일한 '이름' 이 그룹 중 하나는 양식 데이터의 단일 부분을 나타냅니다. "