jQuery表单验证 - 错误标签的CSS [英] jQuery form validation - CSS of error label

问题描述

我使用完全相同的例子在jquery网站上进行简单的表单验证;
http://docs.jquery.com/Plugins/Validation

I am using the exact same example used on the jquery website for a simple form validation; 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.

我使用的CSS代码稍有改变，但仍然很简单;

The CSS code I am using is slightly altered, but still very simple;

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/

Here is the jfiddle http://jsfiddle.net/nBv7v/

推荐答案

报价OP：示例中的错误消息显示在每个输入字段的右侧
。我想显示每个输入
字段下的错误，它是如何工作的？

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

您可以简单地将默认元素从标签更改为 div 使用 errorElement 选项。由于 div 是块级，它将自动换行到另一行。

You can simply change the default element from label to div by using the errorElement option. Since div is "block-level", it will automatically wrap to another line.

$(document).ready(function() {

    $('#myform').validate({ // initialize the plugin
        errorElement: 'div',
        // your other rules and options
    });

});

工作演示： http://jsfiddle.net/xvAPY/

你甚至不必混乱的CSS。但如果您需要更改任何内容，请使用 div.error 定位。

You don't even have to mess with the CSS. But if you need to change anything, target them with div.error.

div.error {
    /* your rules */
}

---

请参阅有关更多验证插件选项的文档。

这篇关于jQuery表单验证 - 错误标签的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！