HTML5自定義驗證演示文稿

Question

HTML5提供自動彈出驗證消息。

如何刪除此彈出窗口並在相關字段旁邊顯示消息？

Answer 1

彈出窗口驗證消息的實際格式是瀏覽器特定的，因此您不會找到改變內置驗證消息顯示方式的跨瀏覽器，純HTML方式。

如果您願意使用jQuery，請考慮使用諸如jQuery Validation插件之類的內容，僅舉一例。

如果您需要純HTML/CSS，您的選擇是相當有限的。一些瀏覽器（基於Webkit的瀏覽器）將允許按照本文描述的瀏覽器特定的CSS自定義彈出框：How do you style the HTML5 form validation messages?

雖然它不控制驗證彈出窗口，但輸入本身可以使用:valid和:invalid CSS僞類。例如：

input:valid { 
    background-color: #FFFFFF; 
} 
input:invalid { 
    background-color: red; 
}