本文介绍通过禁用原生 tooltip 行为、结合 invalid 与 input 事件及 CSS 控制，实现自定义错误提示的持久化显示——即提示一旦触发，仅在用户输入有效内容后才消失。
本文介绍通过禁用原生 tooltip 行为、结合 `invalid` 与 `input` 事件及 css 控制，实现自定义错误提示的持久化显示——即提示一旦触发，仅在用户输入有效内容后才消失。
浏览器原生的表单验证 tooltip（如 “Value not filled in!”）具有强交互依赖性：它会在失焦、滚动或点击其他区域时自动隐藏，且无法通过标准 API 强制保持可见。若需实现“错误提示出现后，持续显示直至字段被有效修正”，必须绕过原生机制，构建可控的自定义提示层。
核心思路是三步协同：
-
拦截默认行为：在
invalid事件中调用e.preventDefault()，阻止浏览器弹出原生 tooltip； -
标记无效状态：为出错字段添加 CSS 类（如
.invalid），作为后续样式控制的钩子； -
动态恢复状态：监听
input事件，实时检测e.target.validity.valid，仅当字段通过验证时移除标记类。
以下为完整可运行示例：
.invalidmessage {
visibility: hidden;
color: #d32f2f;
font-size: 0.875rem;
margin-top: 4px;
line-height: 1.4;
}
input.invalid ~ .invalidmessage {
visibility: visible;
}
document.forms.form01.addEventListener('invalid', e => {
e.preventDefault();
e.target.classList.add('invalid');
}, true); // useCapture = true 确保捕获阶段拦截
document.forms.form01.addEventListener('input', e => {
if (e.target.validity.valid) {
e.target.classList.remove('invalid');
}
});
✅ 关键细节说明：
-
addEventListener的第三个参数设为true（即启用捕获阶段），可确保在原生 tooltip 渲染前就拦截invalid事件，避免闪烁或竞态； - 使用
~（通用兄弟选择器）而非+，使.invalidmessage可置于表单任意位置（不强制紧邻 input），提升 HTML 结构灵活性； -
validity.valid是最可靠的验证状态判断依据，比检查value.length > 0更严谨（例如对type="email"自动校验邮箱格式）； - 若需支持多个字段，该方案天然可扩展：每个
后紧跟对应
