jquery validateを使用して最小限の入力で検証するにはどうすればよいですか？

Question

このような私のhtmlコード：

<form method="post" id="form-product"> 
    <input type="text" id="test-1" name="test[1]" /><br> 
    <input type="text" id="test-2" name="test[2]" /><br> 
    <input type="text" id="test-3" name="test[3]" /><br> 
    <input type="text" id="test-4" name="test[4]" /><br> 
    <input type="text" id="test-5" name="test[5]" /><br> 
    <button type="submit">Submit</button> 
</form> 

このような私のjavascriptのコード：

$(document).ready(function() { 
    $('#form-product').validate(); 
    $('[name^="test"]').each(function() { 
     console.log('test') 
     $(this).rules('add', { 
      required: true, 
      messages: { 
       required: 'Minimal 1 input' 
      } 
     }); 
    }); 
}); 

デモと、このような完全なコード：http://jsfiddle.net/oscar11/XTtTP/6/

私は

検証を動的にしたいです

ユーザーが何も入力せずにサブミットすると、「最小1入力」というメッセージが表示されます

ユーザーが1つのテキストボックスに入力して送信すると、それが成功します。

私が作成したコードは、1つのテキストボックス内のユーザー入力が、その後提出した場合、それはまだメッセージ「最小1入力」を持って、まだ

完璧ではありません。メッセージはありません。

コードを改善するにはどうすればよいですか？

Answer 1

あなたのコードはすべて必要です。グループから1つのフィールドのみを必要とする場合は、代わりにrequire_from_groupルールを使用する必要があります。

$(document).ready(function() { 
    $('#form-product').validate(); 
    $('[name^="test"]').each(function() { 
     console.log('test') 
     $(this).rules('add', { 
      require_from_group: [1, $('[name^="test"]')], 
      messages: { 
       require_from_group: 'Minimal 1 input' 
      } 
     }); 
    }); 
}); 

require_from_groupルールはadditional-methods.jsファイルの一部です。

DEMO：jsfiddle.net/nw53mw17/

私はまた、あなたがプラグインの最新バージョン（複数可）を使用することを示唆しています。あなたのjsFiddleは本当に古い1.10を使用していますが、最新バージョンは1.17です。これは大きな違いです。

---

EDITは：メッセージをグループ化するためには

、groupsオプションを使用します。実行時にすべての名前がわからないので、.each()を使用してこのパラメータを構成します。

// dynamically construct groups parameter 
var grp = ""; 
$('[name^="test"]').each(function() { 
    grp += $(this).attr('name') + " "; 
}); 
grp = $.trim(grp); 
var myGroups = {TESTS: grp}; 

// intialize plugin with options 
$('#form-product').validate({ 
    groups: myGroups 
}); 

DEMO 2：あなたは、フォーム上でこのメッセージの配置が気に入らない場合jsfiddle.net/nw53mw17/2/

、the errorPlacement optionを使用しています。

このプラグインのonline documentationをお読みください。