JQuery validate - two required fields with one error message
I'm trying to use the "group" parameter of the jQuery validate plugin to validate two select boxes that require both, but only one error message should appear:
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');
}
}
});
Markup:
<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>
They seem to group the error messages so that only one is visible, but it seems like an approach to require only one field per group ... any ideas?
+3
source to share
1 answer
The demo at http://docs.jquery.com/Plugins/Validation/validate#options shows this code:
$("#myform").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname"
|| element.attr("name") == "lname" )
error.insertAfter("#lastname");
else
error.insertAfter(element);
},
debug:true
})
Note that there are no "rules". It might change something if you remove it from your code.
0
source to share