html 更改输入后重新验证字段

vc9ivgsu 于 2022-12-16 发布在其他

关注(0)|答案(3)|浏览(124)

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

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

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

Html

来源：https://stackoverflow.com/questions/55575866/re-validate-field-after-changing-input

3条答案

按热度按时间

ukdjmx9f1#

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

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

至少这看起来有用。
有没有更聪明的解决方案？

赞(0）回复(0）举报 2022-12-16

mf98qq942#

添加到invalid事件处理程序中的blur事件，如下所示：

document.addEventListener("invalid", function(e) {
    const oldClassName = e.target.className;
    e.target.className += "-invalid";
    e.target.addEventListener("blur", function(e) {
        e.target.className = oldClassName;
    }, { once: true });
});

末尾的{ once: true }选项确保一旦发生模糊，事件侦听器就会关闭。

赞(0）回复(0）举报 2022-12-16

brqmpdu13#

浏览器会自动为您添加/删除:invalid伪选择器https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid，您只需按照常规大小写（不是无效）和无效大小写（使用:invalid选择器）来设置表单域的样式即可

赞(0）回复(0）举报 2022-12-16