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：“示例中的錯誤消息顯示在每個輸入字段的右側。我想在每個輸入字段下顯示錯誤。這是如何工作的？”

您可以使用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 */
}

---

有關更多驗證插件選項，請參閱文檔 。

Answer 2

label元素是inline element而不是block-level元素。 換句話說，默認情況下， label元素不會啟動新行。

為此，您可以覆蓋其默認樣式，如下所示：

label.error {
    display:block;
    width:100%;
    ...
}

請參閱基於您自己的JsFiddle演示 。

Answer 3

你必須在label.error上設置display: block ，這樣它就會顯示在下一行。 現在，您唯一需要做的就是在label.error添加更多填充，或者使用表格或其他東西來對齊文本框下的錯誤。

在您發布的jsFiddle中，以下修改會將錯誤消息放在文本框下：

label.error { display: block; float: none; color: red; padding-left: 11.5em; vertical-align: top; }

Answer 4

就像使用這個類和這個css一樣簡單。

.has-error input{
  background: rgba(166, 66, 66, 0.69);
}