jquery错误放置答案

【问题标题】：jquery error placementjquery错误放置
【发布时间】：2009-05-06 11:24:31
【问题描述】：

我有一个 jquery 表单。验证工作正常，但我希望正确放置错误。现在它在 IE 7 中显示为：

alt text http://img412.imageshack.us/img412/1810/errorhma.jpg

但我想将其显示为：

alt text http://img520.imageshack.us/img520/7089/error1ace.jpg

这是css代码：

div.error { display:none; }
           <%-- input { border: 1px solid black; }--%>
            input:focus { border: 1px dotted black; }
            input.error { border: 2px solid red; }
            label.error { color: white; font-size:16px; font-family:Nyala; background-color: red }
            label.valid { color: green; }

【问题讨论】：

标签： jquery css internet-explorer validation

【解决方案1】：

试试 label.error{display:block;}

【讨论】：

【解决方案2】：

您可以使用 errorPlacement 控制错误消息的位置。默认值为“error.insertAfter(element)”。例如，您可以使用其中之一：

errorPlacement: function(error, element) {
    error.insertBefore( element );
    //error.appendTo( element.parent().next() );
    //error.appendTo(label.insertAfter( element ));
    //error.insertAfter(element.sibling(a));
}

或者甚至在这里放置一些条件并使用其他语句：

errorPlacement: function(error, element) {
    if ( element.is(".something") ) {
        element.nextAll('div').html(error);
    } else {
        error.insertAfter( element );
    }
}

希望对你有帮助

【讨论】：

【解决方案3】：

有几个问题，第一个是错误着色显示为输入元素元素周围。因此，您要么需要使用错误 div 来包含输入元素，要么只需更改表单元素容器的颜色。我正在投票改变容器的颜色。

其次，您希望 div.error 左右清晰（假设您只是更改表单元素容器的颜色），因此只需添加：

div.error {
  clear: both;
}

这当然假设您出于某种原因将其浮动到左侧。无论如何，请看一个简单的示例，说明一种布局方式

http://jsbin.com/amaxa

【讨论】：