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

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?"

您可以使用 errorElement option 将默认元素从 label 更改为 div .由于 div 是“ block 级”，它会自动换行。

$(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 .