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...like so:

<tbody>
     <c:forEach items="${list}" var="item">
        <tr>
          <td align="center">
             <input type="checkbox" name="selectItems" value="<c:out value="${item.numberPlate}"/>" />
          </td>
          <!--some other columns-->
         </tr>
      </c:forEach>                       
</tbody>

------------------------------EDITED-------------------------

I found that I can use errorPlacement , but I have no idea how to show ONLY the error message of the checkbox array in the table footer or somewhere else inside the second fieldset.

Hope you can help me out.

Answer 1

Why not use a custom validation method ? Something like this:

jQuery:

// The custom validation method, returns FALSE (invalid) if there are
// no checkboxes (with a .one_required class) checked
$.validator.addMethod("one_required", function() {
    return $("#myform").find(".one_required:checked").length > 0;
}, 'Please select at least one vehicle.');

$("#myform").validate({
    // Use the built-in errorPlacement function to place the error message
    // outside the table holding the checkboxes if they are the ones that
    // didn't validate, otherwise use the default placement.
    errorPlacement: function(error, element) {
        if ($(element).hasClass("one_required")) {
            error.insertAfter($(element).closest("table"));
        } else {
            error.insertAfter(element);
        }
    }
});

HTML:

<form id="myform">
    <!-- table, rows, etc -->
    <td align="center"><input type="checkbox" class="one_required" name="selectItems[]" value="NA245852" /></td>
    <td>NA245852</td>
    <!-- more rows, end table, etc -->
    <br/>
    <input type="submit" value="Go, baby !">
</form>

Since the jQuery Validate plugin can also validate an element if the method name is present as a class, simply output the .one_required class on all checkboxes.

See a working demo on JSFiddle with multiple checkboxes.

EDIT:

Here's your own code with the above solution implemented.

Hope this helps !

Answer 2

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("<YOUR_CUSTOM_MESSAGE>");
    } else { 
        error.insertAfter(element);
    }
  },
  rules: ..... your rules
});

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

EDIT: Change your javascript to as follows:

<script type="text/javascript">
    $(document).ready(function(){        
                var formValidator = {};
                $("#Date").datepicker();       
                formValidator = $("#form1").validate({
                        errorPlacement:function(error,element) {
                                if (element.attr("name") == "selectedItems") {
                                                //Add Code to append the error message to a predefined element
                                        $("#errorDiv").html("Select at least one vehicle");
                                } else {
                                        error.insertAfter(element);
                                }
                        },

                        rules: {
                                avgTime:{
                                        required:true,
                                        number:true
                                },

                                selectedItems:
                                {
                                        required:true
                                },
                                Date:{
                                        required:true,
                                        date:true
                                }

                        },    
                        //onclick: true,
                        submitHandler: function(form) {
                                $("#errorDiv").html("");
                                form.submit();
                        }

                });       
                $("input[name=selectedItems]").bind("change", function() {
                        var me = $(this);
                        var scoper = me.parent().parent();
                        var otherInputs = $("input[name^=mileage]", scoper);
                        otherInputs.attr("disabled", !this.checked);
                        otherInputs.attr("value","");
                        if (this.checked)
                        {
                                otherInputs.addClass('required number');
                                $("#errorDiv").html("");
                        }
                        else
                        {
                                otherInputs.removeClass("required number");
                        }
                        formValidator.element("input[name=selectedItems]");
                });


        });  
</script>