HTML5 验证：更改输入后重新验证字段答案

【问题标题】：HTML5 Validation: Re-validate field after changing inputHTML5 验证：更改输入后重新验证字段
【发布时间】：2019-08-29 17:55:24
【问题描述】：

我们正在使用 HTML5 表单验证（我们明确不想使用 jQuery 验证插件...）。目前我可以在提交后标记无效/空字段。我是这样做的：

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

但在用户向字段输入信息后，标记仍然存在。如何删除 className，比如说 onBlur ？

【问题讨论】：

标签： html validation html5-validation

【解决方案1】：

也许我可以添加以下 CSS 类：

input:invalid:focus,
input.invalid{
    border: solid 1px #f00;    /* red border */
}
input:valid {
    border: 1px solid #ced4da; /* reset to default border color */
}

至少这似乎有效。

有没有更智能的解决方案？

【讨论】：