如何让表单验证错误Tooltip保持显示直至用户修正输入错误？

要解决默认提示框自动消失的问题，我们可以通过监听字段的invalid、blur和input事件，配合HTML5表单验证API来控制提示框的显示逻辑：

<form action="" method="get">
    <input type="text" name="name" required 
           oninvalid="this.setCustomValidity('Value not filled in!')"
           onblur="if (!this.validity.valid) this.reportValidity()"
           oninput="this.setCustomValidity('')" />
    <input type="submit" value="Submit!" />
</form>

逻辑说明： #

• oninvalid事件：表单提交触发验证失败时，设置自定义提示文本，标记字段为无效状态。
• onblur事件：当字段失去焦点但仍未填写内容（无效状态），调用reportValidity()强制浏览器重新显示提示框，阻止默认的自动消失行为。
• oninput事件：用户开始输入内容时，清空自定义提示文本，让字段恢复有效状态，提示框自动消失。

如果需要给错误字段添加视觉样式，可在oninvalid中加入this.classList.add('has-error')，oninput中加入this.classList.remove('has-error')，再配合CSS实现对应样式。

内容的提问来源于stack exchange，提问作者Polikarpos Goldshtein