[JQUERY] 동적으로 생성되는 jQuery를 검증 어레이 입력 요소

동적으로 생성되는 jQuery를 검증 어레이 입력 요소

해결법

1. ---

   1.새로운 필드를 생성하는 코드에 대해서 :

   새로운 필드를 생성하는 코드에 대해서 :

   // Mode 1
   $("#addInput").on('click', function () {
       $('#inputs').append($('<input class="comment" name="name[]" />'));
   });
   

   당신은 똑같은 이름 속성 이름 = 할당했기 때문에 당신의 "모드 1"작동하지 않는 전체 이유는 "이름을 []"매일 새로운 입력합니다. 절대적으로 플러그인 jQuery를 검증은 모든 입력 요소는 고유 한 이름 속성이 있어야합니다. 그냥이 고유 한 이름을 확인하기 위해 이름 [] 내에서 numberIncr 변수를 사용합니다.

   또한, 당신은 정말 제출에 규칙을 추가 할 수 없습니다. 모든 규칙이 의미를 많이하지 않는이 시점에서 규칙을 추가, 그래서 확인되는 경우 이벤트가 일반적이다 제출합니다. 새로운 입력 필드를 만들 때 새로운 규칙을 추가해야합니다.

   당신의 간단한 예를 들어, 규칙 ( '추가') 방법이 어쨌든에 대한 잔인한 당신은 완전히 ( '제출') 핸들러 당신의 CSTE 연구진을 제거 할 수 있습니다. 규칙이 필요하기 때문에, 당신은 단순히 새로운 입력 요소에 = "필요한"클래스를 추가 할 수 있습니다.

   여기에 작업 코드는 다음과 같습니다

   jQuery를 :

   $(document).ready(function () {
   
       // MODE 1
       var numberIncr = 1;
       $("#addInput").on('click', function () {
           $('#inputs').append($('<input class="comment required" name="name[' + numberIncr + ']" />'));
           numberIncr++;
       });
   
       $('form.commentForm').validate();
   });
   

   DEMO : http://jsfiddle.net/ThE5K/6/

2. ---

   2.

       The validation can be simply done by class name
           <form action="http://xxxx/project/create" class="form-horizontal" id="invoice_form" method="post" accept-charset="utf-8">
               <table>
                   <tr>
                       <td><input type="text" name="description[]" class="form-control validate_form" id="description"><span class="error">This field is required.</span></td>
   
                       <td><input type="text" name="per_litre[]" class="form-control validate_form validate_number per_litre"><span class="error">This field is required.</span><span class="error">Please enter number.</span></td>
                   </tr>
                   <tr>
                       <td><input type="text" name="description[]" class="form-control validate_form" id="description"><span class="error">This field is required.</span></td>
   
                       <td><input type="text" name="per_litre[]" class="form-control validate_form validate_number per_litre"><span class="error">This field is required.</span><span class="error">Please enter number.</span></td>
                   </tr>
               </table>
   
               <button type="submit" id="invoice_submit" class="btn btn-primary">Submit</button>
           </form>
   

   Add style to hide error message:
        <style type="text/css">
           .error {
               color: red;
               display: none;
           }
       </style>
   

    Script for validate form fields by class name
   
       <script>
           $(document).on('click', '#invoice_submit', function(e){
               e.preventDefault();
               i = 0;
               $(".validate_form").each(function() {
                   var selectedTr = $(this);
                   var value = $(this).val();
                   if (!value) {
                       selectedTr.next("span").show();
                       i++;
                   } else {
                       selectedTr.next("span").hide();
                   }
               });
   
               $(".validate_number").each(function() {
                   var selectedTr = $(this);
                   var value = $(this).val();
   
                   var filter = /^[0-9]+([,.][0-9]+)?$/g;
                   if (value != '') {
                       if (!filter.test(value)) {
                           selectedTr.next("span").next("span").show();
                           i++;
                       } else {
                         selectedTr.next("span").next("span").hide();
                       }
                   }
               });
               if (i == 0) {
                   $('#invoice_form').submit();
               }
           });
       </script>
   

from https://stackoverflow.com/questions/17632180/jquery-validate-array-input-element-which-is-created-dynamically by cc-by-sa and MIT license