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:"示例中的错误消息显示在每个输入字段的右侧.我想在每个输入字段下显示错误.这是如何工作的？"

你可以简单地从更改默认的元素label来div使用errorElement选项.由于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演示.