你如何設計HTML5表單驗證信息？

假設你有一些HTML這樣的：你如何設計HTML5表單驗證信息？

<form> 
    <input placeholder="Some text!" required> 
    <input type="email" placeholder="An Email!" required> 
    <input type="submit" value="A Button!"> 
</form>

因爲required屬性，更新Webkits和Firefoxes顯示驗證消息字段旁邊，如果你讓它空白。

他們通過一個規則被風格化，例如迴應：

div { 
    font: Helvetica; 
}

但我不能爲他們找到一個更具體的選擇。有誰知道哪些選擇器被使用，或將被使用，甚至是與webkit/gecko有關的錯誤報告？

（的jsfiddle顯示，他們可以用一個div選擇器樣式：http://jsfiddle.net/p7kK5/）

來源

2011-04-19 Rich Bradshaw

不，但期待它最終通過。似乎更像是規範中的一個疏忽 - 消息在哪裏出現？消息集（無JS）在哪裏？這裏有一個很好的建議，http：//www.broken-links.com/2011/03/28/html5-form-validation/，但直到類似的東西被添加到規範，你必須堅持自定義驗證服務器端和客戶端 – graham 2011-04-19 14:10:01

可能的重複[我如何樣式HTML 5表單驗證錯誤消息與CSS？]（http://stackoverflow.com/questions/5328883/how-do-i-style- -html-5-form-validation-error-messages-with-css） – Quentin 2011-04-23 22:09:49

更新：鉻不允許造型表單驗證泡了：https://code.google.com/p/chromium/issues/detail?id=259050

~~在Chrome中的最新迭代，支持已被添加了僞選擇這些，即;~~

~~::-webkit-validation-bubble{} ::-webkit-validation-bubble-top-outer-arrow{} ::-webkit-validation-bubble-top-inner-arrow{} ::-webkit-validation-bubble-message{}~~

~~欲瞭解更多信息，請查看 Webkit "Styling Form Controls" trac page。~~

此外，Firefox擁有的元素屬性支持X-MOZ-errormessage的，使您能夠更改錯誤信息，這是一件好事，你可以使用CSS和-webkit-驗證泡在Chrome瀏覽器執行的文本-信息。查看更多關於x-moz-errormessage on the MDN Docs page。

到目前爲止，Firefox無法設置錯誤氣泡的樣式。

來源

2011-05-11 14:02:23 Keithamus

MDC> MDN，對吧？ – 2012-01-09 11:32:51

當寫這篇評論時，我相信MDN（Mozilla開發者網絡）曾經被稱爲MDC（Mozilla開發者中心）。兩者都是一樣的。爲清晰起見進行編輯。 – Keithamus 2012-01-15 20:56:02

Firefox怎麼樣？ – WEFX 2012-09-04 20:01:14

你需要使用更具體選擇其他一切恐怕..身體> DIV等

來源

2011-04-26 08:54:13 Sheldon

這是我唯一的想法。我不確定我想要走這條路。猜猜我們必須等待官方的支持。 – 2011-04-26 10:12:13

@Sheldon你的意思是什麼？ – 2011-07-02 15:22:48

你如何設計HTML5表單驗證信息？

回答

相關問題