使用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 ：

  

默认情况下，Gecko会应用一种创建红色“发光”的样式（使用   box-shadow属性）包含具有此伪类的项目   应用。有关示例的示例，请参阅：invalid伪类   覆盖默认样式。

虽然我 - 也 - 在Firefox中看不到这种行为（不是Chrome）