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

一つは、使用が提出するということです..私はそこに道のこの百パーセントを持っていないが、私は問題のカップルがあると思いますフォームを検証する（つまり2回検証する）別の呼び出しを妨害している可能性があります。また、入力が一意の名前を持たないこともあります。

更新日：

<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" 
       } 
      }); 

     } 
    }); 
});