jQuery検証プラグインの「グループ」オプションを使用して、両方が必要な2つの選択ボックスを検証しようとしましたが、表示されるエラーメッセージは1つだけです。
JavaScript:
$('form').validate({
groups: {
cardExpiration: 'card_expirationMonth card_expirationYear'
},
rules: {
card_expirationMonth: 'required',
card_expirationYear: 'required'
},
errorPlacement: function (error, element) {
if (element[0].name === 'card_expirationMonth' || element[0].name === 'card_expirationYear') {
error.prependTo('form');
}
}
});
マークアップ:
<form method="post" action="/wherever">
<div class="-field field-expirationMonth">
<select name="card_expirationMonth" id="card_expirationMonth">
<option value="">MM</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="etc">Etc</option>
</select>
</div>
<div class="-field field-expirationYear">
<select name="card_expirationYear" id="card_expirationYear">
<option value="">YY</option>
<option value="2012">12</option>
<option value="2013">13</option>
<option value="2014">14</option>
<option value="2015">15</option>
<option value="etc">Etc</option>
</select>
</div>
</form>
これはエラーメッセージをグループ化するように見えるので、表示されるのは1つだけですが、グループ内の1つのフィールドのみが必要であるというアプローチを取っているようです...何かアイデアはありますか?