问题
I've search a lot but still haven't figured it out... How do I pass various error messages to a single box (div) instead of highlighting them nearby the relative fields. Let's say, I've got 4 required fields and have custom messages for them:
<script>
// validation
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#register-form").validate({
validClass: "valid",
errorContainer: $("#error-note"),
errorLabelContainer: $([]),
rules: {
name: "required",
email: {
required: true,
email: true
},
birthdate: "required",
eua: "required"
},
messages: {
name: "Name is required",
email: "Please, enter your email",
birthdate: "We need to know your date of birth",
eua: "Please check the checkbox..."
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
</script>
#error-note is a div right before all fields where I need to get all/any of the error message output (printed). But now error messages get "built-in" in relative fields (which I don't need). Is there any way to achieve it?
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
回答1:
Answer posted for the benefit of the SO reader.
As per example code in the documentation it's really this simple,
$(document).ready(function () {
$('#myform').validate({
// rules and other options,
errorLabelContainer: "#error-note",
wrapper: "li"
});
});
<div id="error-note"></div> must also be placed within the HTML layout.
Working DEMO: http://jsfiddle.net/6kxSp/
NOTES:
1) The OP simply mixed up his containers. errorContainer: is a second optional container. errorLabelContainer is good enough for a single box containing the error listing.
2) This makes no sense: errorLabelContainer: $([]). If the OP had read the sample code in the docs, he would have seen that he just defeated what he was trying to achieve. $([]) isn't even a valid jQuery selector.
3) This is unnecessary and redundant.
submitHandler: function(form) {
form.submit();
}
As per docs, the submitHandler callback function automatically submits the form after validation. No need to call submit() here.
4) As per docs, this is the default, no need to declare it...
validClass: "valid"
5) Wrapping up everything like this is superfluous, unnecessary, verbose, and arcane...
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
$("#register-form").validate({ .... });
}
}
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
It serves no useful purpose other than to cause more confusion to those seeking guidance. It comes from a popular, yet poorly explained, online demo/tutorial by Sam Deering that is linked to/from many places. IMO, if you're going to pass yourself off as a jQuery/JavaScript expert, at least use the code formatting style more commonly seen in JavaScript, and not the one used with PHP (Allman). Whatever code formatting style is chosen, at least use it consistently.
Exactly like any other jQuery plugin, simply wrapping the .validate() method within the DOM ready event handler is more than adequate for proper initialization of this plugin.
$(document).ready(function() {
$("#register-form").validate({
// any rules, options and callbacks
})
});
来源：https://stackoverflow.com/questions/15925278/pass-jquery-validate-error-messages-to-a-single-box-div