jQuery表单验证 - 错误标签的CSS

Question

我使用jquery网站上使用的完全相同的示例进行简单的表单验证; http://docs.jquery.com/Plugins/Validation

但有一点我不明白，示例中的错误消息显示在每个输入字段的右侧。 我想在每个输入字段下显示错误。 这是如何运作的？ 我试着玩宽度和填充但到目前为止没有运气。

我使用的CSS代码略有改动，但仍然非常简单;

label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: 0px; vertical-align: bottom; }
p { clear: both; }
fieldset {position: absolute; left: 450px; width: 400px; } 
em { font-weight: bold; padding-right: 1em; vertical-align: top; }

这是jfiddle http://jsfiddle.net/nBv7v/

Answer 1

引用OP：“示例中的错误消息显示在每个输入字段的右侧。我想在每个输入字段下显示错误。这是如何工作的？”

您可以使用errorElement选项将默认元素从label更改为div 。 由于div是“块级”，它将自动换行到另一行。

$(document).ready(function() {

    $('#myform').validate({ // initialize the plugin
        errorElement: 'div',
        // your other rules and options
    });

});

工作演示： http ： //jsfiddle.net/xvAPY/

你甚至不必乱用CSS。 但是如果您需要更改任何内容，请使用div.error定位它们。

div.error {
    /* your rules */
}

---

有关更多验证插件选项，请参阅文档 。

Answer 2

label元素是inline element而不是block-level元素。 换句话说，默认情况下， label元素不会启动新行。

为此，您可以覆盖其默认样式，如下所示：

label.error {
    display:block;
    width:100%;
    ...
}

请参阅基于您自己的JsFiddle演示 。

Answer 3

你必须在label.error上设置display: block ，这样它就会显示在下一行。 现在，您唯一需要做的就是在label.error添加更多填充，或者使用表格或其他东西来对齐文本框下的错误。

在您发布的jsFiddle中，以下修改会将错误消息放在文本框下：

label.error { display: block; float: none; color: red; padding-left: 11.5em; vertical-align: top; }

Answer 4

就像使用这个类和这个css一样简单。

.has-error input{
  background: rgba(166, 66, 66, 0.69);
}