jQuery表单validation – 错误标签的CSS
我使用jquery网站上使用的完全相同的示例进行简单的表单validation; 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/
引用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 */ }
有关更多validation插件选项，请参阅文档 。
label元素是inline element而不是block-level元素。 换句话说，默认情况下， label元素不会启动新行。
为此，您可以覆盖其默认样式，如下所示：
label.error { display:block; width:100%; ... }
请参阅基于您自己的JsFiddle演示 。
你必须在label.error上设置display: block ，这样它就会显示在下一行。 现在，您唯一需要做的就是向label.error添加更多填充，或使用表格或其他内容来对齐文本框下的错误。
在您发布的jsFiddle中，以下修改会将错误消息放在文本框下：
label.error { display: block; float: none; color: red; padding-left: 11.5em; vertical-align: top; }
就像使用这个类和这个css一样简单。
.has-error input{ background: rgba(166, 66, 66, 0.69); }