jQuery表單驗證 - 錯誤標籤的CSS

我正在使用jQuery網站上用於簡單表單驗證的完全相同的示例; http://docs.jquery.com/Plugins/Validation jQuery表單驗證 - 錯誤標籤的CSS

雖然有一點我不明白，但是示例中的錯誤消息顯示在每個輸入字段的右側。我想在每個輸入字段下顯示錯誤。這是如何運作的？我試着玩弄寬度和填充，但到目前爲止還沒有運氣。

我使用的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/

來源

2013-02-02 Student

您可以發表一個jsfiddle或類似的文章，以便我們看到這種行爲嗎？ –

http://jsfiddle.net/nBv7v/ – Student

報價OP：「在這個例子中的錯誤信息顯示在每個右側輸入字段，我想在每個輸入字段下顯示錯誤，這是如何工作的？

你可以簡單地通過使用errorElement option從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 */ 
}

見the documentation for more Validate plugin options。

來源

2013-02-02 22:00:37 Sparky

謝謝。這工作！ – Student

@Student，不客氣。 – Sparky

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

爲了做到這一點，你可以覆蓋其默認樣式，像這樣：

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

見JsFiddle demo基於你自己的。

來源

2013-02-02 21:55:30 Boaz

謝謝你。這也適用。 – Student

@學生沒問題。我更喜歡Sparky的解決方案，因爲它採用了文檔化的插件選項，而不是搞亂插件的CSS。 – Boaz

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

在您發佈，下面的修改將使錯誤消息下的文本框中的jsfiddle：

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

來源

2013-02-02 22:00:18 Relevart

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

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

來源

2016-12-10 13:22:12 Kamlesh

jQuery表單驗證 - 錯誤標籤的CSS

回答

相關問題