HTML5中的验证。 ：提交后无效的课程 [英] Validation in HTML5. :invalid classe after submit

问题描述

我正在构建一个表单，我想使用：invalid 选择器为必填输入字段提供红色边框（如果用户按下提交但未填写它们的话） ，但使用这种方法会使它们在页面加载时以高亮显示。在给用户至少一次填充机会之前给用户这种警告似乎并不友好。

I'm building a form and I want to use the :invalid selector to give the "required" input fields a red border if the user presses submit without filling them, but using this makes them appear highlighted right when the page loads. It seems unfriendly to give this kind of warning to the user before even giving him the chance to fill them at least once.

有没有一种方法可以使这些字段仅高亮显示用另一种方式表示，尝试提交表单后，是否只有在单击提交（或至少失去对必填字段的关注之后）才能运行验证？

Is there a way that these fields appear highlighted only after trying to submit the form, said in another way, is there a way to run the validation only after clicking submit (or at least losing focus on the required input fields?)

推荐答案

没有开箱即用的东西。

Mozilla拥有自己的伪类，用于类似'：-moz的东西-ui无效。如果要实现这样的目标，则必须使用约束验证DOM-API：

Mozilla has its own pseudoclass for something very similiar called ':-moz-ui-invalid'. If you want to achieve something like this, you have to use the constraint validation DOM-API:

if(document.addEventListener){
    document.addEventListener('invalid', function(e){
        e.target.className += ' invalid';
    }, true);
}

您也可以使用 webshims lib polyfill ，它不仅可以填充不支持浏览器的浏览器，而且还会向所有浏览器添加类似-moz-ui-invalid的类似内容（.form-ui-invalid）。

You can also use webshims lib polyfill, which will not only polyfill incapable browsers, but also adds something similiar like -moz-ui-invalid to all browser (.form-ui-invalid).

这篇关于HTML5中的验证。 ：提交后无效的课程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！