Question

我们正在使用HTML5表单验证（并且我们明确不想使用jQuery validate插件...）。目前，我能够在“提交”之后标记无效/空白字段。我这样做：

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

但是，在用户向字段输入信息之后，标记仍然保留。我该如何删除className，例如onBlur？

Answer 1

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

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

至少这似乎可行。

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

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

1 个答案: