使用checkValidity进行HTML5表单验证;t显示默认的红色/橙色边框

HTML 5 form validation using checkValidity doesn't show default red/orange border

本文关键字：默认 红色 边框 橙色 显示 进行 checkValidity HTML5 表单 验证 使用      更新时间：2023-09-26

使用html 5表单验证我想验证我们使用ajax检索的表单。

当我验证我的表单（使用.checkValidity()）时，使用firefox/chrome的默认无效红色/橙色边框不会显示。

当我单击input[type="submit"]时，它确实显示了这个红色边框。

参见这个jsfiddle示例：

http://jsfiddle.net/jyaHZ/

如果我错了，请纠正我，但我确实认为你仍然需要自己做CSS样式。HTML5在这里添加的只是一个:invalid和:valid伪类，您可以像this一样使用它。

有关HTML5表单验证的更多信息，请访问MDN

编辑：

显然，我可以纠正自己，因为它在这里声明：

默认情况下，Gecko应用一种创建红色"光晕"的样式（使用box shadow属性）围绕具有此伪类的项应用请参阅：invalid pseudo-class以获取显示如何以覆盖默认样式。

尽管我在Firefox（也不是Chrome）中也看不到这种行为

相关文章：