jQuery 입력에서 동일한 이름 확인

Question

이 양식에는 동일한 이름이지만 유사한 (증분) ID가있는 입력이 있습니다.

사람의 이름이있는 경우 양식 유효성을 검사해야한다, 나이는

이제 첫 번째 입력은 필수입니다 .. 의무적으로해야합니다. 하나는 사용하여 제출한다는 것입니다 ..

<form id="people"> 
     <div class="section"> 
      <input id="person1" name="person" class="person" type="text" placeholder="First Name" /> 
      <input id="age1" name="age" class="age" type="text" placeholder="Age" /> 
     </div> 
     <div class="section"> 
      <input id="person2" name="person" class="person" type="text" placeholder="First Name" /> 
      <input id="age2" name="age" class="age" type="text" placeholder="Age" /> 
     </div> 
     <div class="section"> 
      <input id="person3" name="person" class="person" type="text" placeholder="First Name" /> 
      <input id="age3" name="age" class="age" type="text" placeholder="Age" /> 
     </div> 
     ... 
     <input type="submit" id="submit" name="submit" value="Add" /> 
    </form> 
    <script type="text/javascript"> 
     $(function(){ 
      $('#people').validate(); 
      $('#submit').click(function(){ 
       $('[id^="person"]').each(function(){ 
        if ($(this).val().length>0){ 
         //alert($(this).val()); 
         //alert($(this).parent().find('.age').val()); 
         $(this).rules('add', { 
          required: true, 
          minlength: 2, 
          messages: { 
           required: "Specify the person name", 
           minlength: "Minimum of 2 characters" 
          } 
         }); 
         $(this).parent().find('.age').rules('add', { 
          required: true, 
          number: true, 
          messages: { 
           required: "Must have an age", 
           number: "Specify a valid age" 
          } 
         }); 
        } 
       }); 
      }); 
     }); 
    </script> 
</body> 

Answer 1

내가 거기 방법이 100 %를 가지고 있지 않지만, 내가 문제의 부부가 있다고 생각 : 여기

내 코드입니다 트리거가 폼을 확인 (즉, 두 번 유효성을 검사)하는 별도의 호출을 방해 할 수 있으며 두 번째는 입력에 고유 한 이름이 없음을 나타냅니다.

업데이트 :

<form id="people" method="post"> 
     <div class="section"> 
      <input id="person1" name="person1" class="person" type="text" placeholder="First Name" /> 
      <input id="age1" name="age1" class="age" type="text" placeholder="Age" /> 
     </div> 
     <div class="section"> 
      <input id="person2" name="person2" class="person" type="text" placeholder="First Name" /> 
      <input id="age2" name="age2" class="age" type="text" placeholder="Age" /> 
     </div> 
     <div class="section"> 
      <input id="person3" name="person3" class="person" type="text" placeholder="First Name" /> 
      <input id="age3" name="age3" class="age" type="text" placeholder="Age" /> 
     </div> 
     <input type="submit" id="submit" name="submit" value="Add" /> 
    </form> 


$(function() { 
    $('#people').validate(); 

    $('.person').blur(function() { 

     if ($(this).val().length) { 

      //alert($(this).val()); 
      //alert($(this).parent().find('.age').val()); 
      $(this).rules('add', { 
       required: true, 
       minlength: 2, 
       messages: { 
        required: "Specify the person name", 
        minlength: "Minimum of 2 characters" 
       } 
      }); 

      $(this).next('input').rules('add', { 
       required: true, 
       number: true, 
       messages: { 
        required: "Must have an age", 
        number: "Specify a valid age" 
       } 
      }); 

     } 
    }); 
});