How would I use the JQuery Validate plugin to have one error message for say 3 fields. For example 3 dob fields. By default I will get 3 error messages if all 3 fields are left blank. I only want one error linked to 3 fields. If any are blank the error comes up.
A:
A couple options: Check out the errorContainer. You can make all of the errors go to a completely separate <div>. Or you can check out the invalid block, and just have an errorMessage.show() command.
Jarrett Meyer
2009-08-17 17:17:32
A:
You can use the groups option to group together inputs. If each of the inputs has an error message, only one will be displayed.
You'll probably want to override the messages associated with each of the fields, so they'll make more sense. For example, by default, you might get an error message like, "This Field is required." Well, that doesn't do the user alot of good when there are three inputs. You probably want to override the message to say "The Local Number is required." For this example, I just overrode all the error messages with "Please enter a valid Phone Number."
<input type="text" name="countryCode" />
<input type="text" name="areaCode" />
<input type="text" name="localNumber" />
groups: {
phoneNumber: "countryCode areaCode localNumber"
},
rules: {
'countryCode': {
required: true,
minlength:3,
maxlength:3,
number:true
},
'contactInformation[areaCode]': {
required: true,
minlength:3,
maxlength:3,
number:true
},
'contactInformation[localNumber]': {
required: true,
minlength:4,
maxlength:4,
number:true
},
},
messages: {
"countryCode": {
required: "Please enter a valid Phone Number",
minlength: "Please enter a valid Phone Number",
maxlength: "Please enter a valid Phone Number",
number: "Please enter a valid Phone Number"
},
"areaCode": {
required: "Please enter a valid Phone Number",
minlength: "Please enter a valid Phone Number",
maxlength: "Please enter a valid Phone Number",
number: "Please enter a valid Phone Number"
},
"localNumber": {
required: "Please enter a valid Phone Number",
minlength: "Please enter a valid Phone Number",
maxlength: "Please enter a valid Phone Number",
number: "Please enter a valid Phone Number"
}
},
Chris
2010-03-18 20:58:58
A:
This code will display one common error if any of the required fields is blank.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate({
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message ='You missed ' + errors + ' fields.';
$("#messageBox").html(message);
$("#messageBox").show();
} else {
$("#messageBox").hide();
}
},
showErrors: function(errorMap, errorList) {
},
submitHandler: function() { alert("Submit!") }
})
});
</script>
</head>
<body>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<div id="messageBox"></div>
<ul id="errorlist"></ul>
<form id="myform" action="/loginurl" method="post">
<label>DOB1</label>
<input name="dob1" class="required" />
<label>DOB2</label>
<input name="dob2" class="required" />
<label>DOB3</label>
<input name="dob3" class="required" />
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Meryl
2010-08-22 07:09:58
I think, this error pops even if there is format error or something else
Starx
2010-08-22 07:20:22
@Baloch: this isn't an answer, it's a comment. And, while I appreciate you don't yet have sufficient rep to *leave* comments, this just adds noise.
David Thomas
2010-10-01 07:29:59