6

我正在使用与 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/

4

4 回答 4

14

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

您可以使用选项简单地将默认元素从 更改label为。由于是“块级”，它将自动换行。diverrorElementdiv

$(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 */
}

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

于 2013-02-02T22:00:37.087 回答
6

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

为此，您可以像这样覆盖其默认样式：

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

看自己的JsFiddle 演示。

于 2013-02-02T21:55:30.987 回答
1

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

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

label.error { display: block; float: none; color: red; padding-left: 11.5em; vertical-align: top; }
于 2013-02-02T22:00:18.440 回答
0

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

.has-error input{
  background: rgba(166, 66, 66, 0.69);
}
于 2016-12-10T13:22:12.183 回答