Jquery validation error message position for checkbox

Question

I am using jquery for checkbox validation(atleast one should be checked), here i need to display error message at the end of all checkboxes, but it always display after the label element and moves all checkboxes at the right side, which looks very weird. Below is my html code:

           <div>
            <label>Please Select a color:</label> 
                <input type="checkbox" id="color"  name="color" value="red"> red</input>
                <input type="checkbox" id="color"  name="color" value="green"> green</input>
                <input type="checkbox" id="color" name="color" value="yellow"> yellow</input>
                <input type="checkbox" id="color"  name="color" value="black"> black</input>
           </div>

Can anyone please tell me how to display error message at the right side after the end of all checkboxes without moving form structure.

Thanks in advance..

~Yash

Answer 1

try this:

error.appendTo("div");

instead of this:

 error.appendTo( element.parent("div").next("div"));

Edit

<form id="myForm" method="post" name="myForm" action="">
        <div>
        <label>Please Select a color:</label> 
        <input type="checkbox" id="color"  name="color" value="red"> red</input>
        <input type="checkbox" id="color1"  name="color" value="green"> green</input>
        <input type="checkbox" id="color2" name="color" value="yellow"> yellow</input>
        <input type="checkbox" id="color3"  name="color" value="black"> black</input>
        <span id="errorToShow"></span> // Note this
        </div>
        <button type="submit">save</button>
    </form>

script:

$("#myForm").validate({
            rules: {
                color: "required"
            },
            messages: {
                color: "select atleast one color"
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") == "color") {
                    error.appendTo("#errorToShow");
                } else {
                    error.insertAfter(element);
                }
            }
        });