jQuery 表单验证 - 错误标签的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14666852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery form validation - CSS of error label
提问by Student
I am using the exact same example used on the jquery website for a simple form validation; http://docs.jquery.com/Plugins/Validation
我正在使用 jquery 网站上使用的完全相同的示例进行简单的表单验证； http://docs.jquery.com/Plugins/Validation
There is one thing I don't understand though, the error message in the example is displayed to the right of each input field. I want to display the errors under each input field. How does that work? I tried playing around with the width and padding but no luck so far.
但是有一点我不明白，示例中的错误消息显示在每个输入字段的右侧。我想在每个输入字段下显示错误。这是如何运作的？我尝试使用宽度和填充，但到目前为止没有运气。
The CSS code I am using is slightly altered, but still very simple;
我使用的 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; }
Here is the jfiddle http://jsfiddle.net/nBv7v/
这是 jfiddle http://jsfiddle.net/nBv7v/
回答by Sparky
Quote OP: "the error message in the example is displayed to the right of each input field. I want to display the errors under each input field. How does that work?"
引用 OP：“示例中的错误消息显示在每个输入字段的右侧。我想在每个输入字段下显示错误。这是如何工作的？”
You can simply change the default element from labelto divby using the errorElementoption. Since divis "block-level", it will automatically wrap to another line.
你可以简单地从更改默认的元素label来div使用errorElement选项。由于div是“块级”，它会自动换行到另一行。
$(document).ready(function() {
$('#myform').validate({ // initialize the plugin
errorElement: 'div',
// your other rules and options
});
});
Working Demo:http://jsfiddle.net/xvAPY/
工作演示：http : //jsfiddle.net/xvAPY/
You don't even have to mess with the CSS. But if you need to change anything, target them with div.error.
您甚至不必弄乱 CSS。但是，如果您需要更改任何内容，请使用div.error.
div.error {
/* your rules */
}
回答by Boaz - Reinstate Monica
The labelelement is an inline elementand not a block-levelelement. In other words, by default the labelelement will not start a new line.
所述label元件是一个inline element，而不是一个block-level元件。换句话说，默认情况下label元素不会开始新行。
In order to do that, you can override its default styling like so:
为此，您可以像这样覆盖其默认样式：
label.error {
display:block;
width:100%;
...
}
See JsFiddle demobased on your own.
请参阅基于您自己的JsFiddle 演示。
回答by Relevart
You have to set display: blockon label.error, this way, it will display in the next line. Now the only thing you have to do is add more padding to label.error, or use a table or something to align the error under the text box.
您必须设置display: blockon label.error，这样，它将显示在下一行。现在您唯一要做的就是向 中添加更多填充label.error，或者使用表格或其他东西来对齐文本框下的错误。
In the jsFiddle you posted, the following modification would put the error message under the text boxes:
在您发布的 jsFiddle 中，以下修改会将错误消息放在文本框下方：
label.error { display: block; float: none; color: red; padding-left: 11.5em; vertical-align: top; }
回答by Kamlesh
As simple as use this class and this css.
就像使用这个类和这个 css 一样简单。
.has-error input{
background: rgba(166, 66, 66, 0.69);
}
