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

Question

我正在使用jquery进行复选框验证（至少应检查一个），这里我需要在所有复选框的末尾显示错误消息，但它总是显示在label元素之后并移动右侧的所有复选框，看起来很奇怪。以下是我的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( 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);
                }
            }
        });

脚本：

private BufferedImage rotate(BufferedImage image, double _theta, int _thetaInDegrees) {

    AffineTransform xform = new AffineTransform();

    if (image.getWidth() > image.getHeight()) {
        xform.setToTranslation(0.5 * image.getWidth(), 0.5 * image.getWidth());
        xform.rotate(_theta);

        int diff = image.getWidth() - image.getHeight();

        switch (_thetaInDegrees) {
            case 90:
                xform.translate(-0.5 * image.getWidth(), -0.5 * image.getWidth() + diff);
                break;
            case 180:
                xform.translate(-0.5 * image.getWidth(), -0.5 * image.getWidth() + diff);
                break;
            default:
                xform.translate(-0.5 * image.getWidth(), -0.5 * image.getWidth());
                break;
        }
    } else if (image.getHeight() > image.getWidth()) {
        xform.setToTranslation(0.5 * image.getHeight(), 0.5 * image.getHeight());
        xform.rotate(_theta);

        int diff = image.getHeight() - image.getWidth();

        switch (_thetaInDegrees) {
            case 180:
                xform.translate(-0.5 * image.getHeight() + diff, -0.5 * image.getHeight());
                break;
            case 270:
                xform.translate(-0.5 * image.getHeight() + diff, -0.5 * image.getHeight());
                break;
            default:
                xform.translate(-0.5 * image.getHeight(), -0.5 * image.getHeight());
                break;
        }
    } else {
        xform.setToTranslation(0.5 * image.getWidth(), 0.5 * image.getHeight());
        xform.rotate(_theta);
        xform.translate(-0.5 * image.getHeight(), -0.5 * image.getWidth());
    }

    AffineTransformOp op = new AffineTransformOp(xform, AffineTransformOp.TYPE_BILINEAR);

    return op.filter(image, null);
}