Placing error message for a checkbox array

Question

I am using the Validation Plugin for jQuery and it works wonders. Except when I have a group of checkboxes...the error messages will display right after the first checkbox..

Answer 1

You can use errorLabelContainer configuration option.. define a div with an id like errorMessages and then change your validate method call as follows:

$("form").validate({
   errorLabelContainer: $("#errorMessages"),
     rules: ..... your rules

Now all the error messages will be displayed in the div. Edit: Updated the answer below to reflect the updates to the question: To change the location of error messages displayed, I can think of using the errorPlacement config parameter. You can use something like: Define a div or a p and keep appending the messages for the checkboxes to this element.

$("form").validate({
errorPlacement:function(error,element) {
    if (element.attr("name") == "selectItems") {
        //Add Code to append the error message to a predefined element
        $("#errorDiv").html("");
        $("#errorDiv").append("");
    } else { 
        error.insertAfter(element);
    }
  },
  rules: ..... your rules
});

jsFiddle URL: http://jsfiddle.net/Z8hWg/28/

EDIT: Change your javascript to as follows: