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 option将默认元素从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 */
}

请参阅the documentation for more Validate plugin options。

Answer 2

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

为了做到这一点，你可以覆盖它的默认样式：

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

根据您自己的身份查看JsFiddle demo。

Answer 3

您必须在display: block上设置label.error，这样，它会显示在下一行。现在，您唯一需要做的就是向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);
}

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

4 个答案: