使用checkValidity的HTML 5表單驗證不顯示默認的紅色/橙色邊框

Question

使用html 5表單驗證我想驗證我們使用ajax檢索的表單。

當我驗證我的表單（使用.checkValidity()）時，使用firefox/chrome的默認無效紅色/橙色邊框不顯示。

當我點擊一個input[type="submit"]它確實顯示這個紅色的邊框。

一個例子來看看這個的jsfiddle：

http://jsfiddle.net/jyaHZ/

Answer 1

糾正我，如果我錯了，但我確實認爲你還是必須做CSS樣式自己。所有HTML5在這裏添加的是:invalid和:valid僞類，您可以使用類似this。

在 MDN

編輯 HTML5的表單驗證

更多信息：

顯然，我可以糾正自己，因爲它規定here說：

默認情況下，壁虎適用一種創造紅色「發光」的風格（使用 箱子陰影道具erty）圍繞具有該僞類 的項目應用。請參閱：無效僞類的示例，該示例顯示 如何覆蓋默認樣式。

雖然我 - 也 - 不能看到