Pass jQuery validate error messages to a single box (div)

Question

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\'

Answer 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
    })

});

---