2012-01-27 17 views
10

私は同じ名前で同じ(インクリメンタルな)IDを持つ入力を持つこのフォームを持っています。私は今、何が起こるjQuery同じ名前の複数のフィールドの妥当性確認

...人の名前がある場合、年齢が必須でなければならないフォームを検証する

は、最初の入力が必須であることです。ここで

は私のコードです:

<html lang="en"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 
</head> 
<body> 
    <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> 

+1

同じ名前の複数のテキストボックスを持つことは、おそらく悪い考えです。 –

+0

私はここにstackoverflowでいくつかの答えを.each()関数で見つけましたが、私はそれを動作させることができませんでした..将来的に私は "行"の動的な番号を持っていますので、それらはサーバ側で簡単です –

+4

@ stian.net - 入力名を繰り返すことは問題ありません。実際、表形式のデータの場合はかなり標準的な方法です。これは確かにこの場合の難しさを作り出すものではありません。 – nnnnnn

答えて

10

jQuery Validatorプラグインは、同じ名前の複数のフィールドをすぐに使用することはできません。プラグインのソースを編集して、必要なフィールドを確認する必要があります。

this answerの回避策についても同様の質問を参照してください。

-5
<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> 

あなたは、配列を角括弧やループを追加する必要があります。

+0

そのように動作させることができませんでした –

+0

角括弧の配列アプローチはPHP AFAIK –

0

友だち!

同じ名前のテキストボックスを検証するには、以下のコードを使用してください。さらに、入力パラメータを配列として宣言する必要はありません。

ここで、「minVal」は、テキストボックスの名前です。 同様に、ドロップダウンの場合、 'document.getElementsByTagName( "select");'

function validateMinimumVal(){ 
    inp = document.getElementsByTagName("TEXT"); 
    for (var i = 0; i < inp.length; ++i) { 
     if (inp[i].name =="minVal" && inp[i].value==''){ 
      alert('plesae Add a MINIMUM VALUE!!'); 
       return false; 
      } 
     } 
    return true; 
} 

Jagan

関連する問題