复选框的 Jquery 验证错误消息位置

Question

我正在使用jquery进行复选框验证（至少应该选中一个），这里我需要在所有复选框的末尾显示错误消息，但它总是显示在标签元素之后并将所有复选框移动到右侧，这看起来很奇怪. 下面是我的 html 代码：

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

谁能告诉我如何在不移动表单结构的情况下在所有复选框结束后在右侧显示错误消息。

提前致谢..

~亚什

Answer 1

尝试这个：

error.appendTo("div");

而不是这个：

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

编辑

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

脚本：

$("#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);
                }
            }
        });