默认浏览器表单验证的 tooltip 会在失焦或滚动后自动消失，无法持久化；本文介绍通过拦截 invalid 和 input 事件、结合 CSS 控制自定义错误提示显示状态，实现“错误不修复、提示不消失”的用户体验。
默认浏览器表单验证的 tooltip 会在失焦或滚动后自动消失，无法持久化；本文介绍通过拦截 `invalid` 和 `input` 事件、结合 css 控制自定义错误提示显示状态，实现“错误不修复、提示不消失”的用户体验。
要实现错误提示仅在用户修正输入后才消失（而非失焦即隐），必须绕过浏览器原生 tooltip 的不可控行为——因为原生 setCustomValidity() 仅能修改提示文本，无法干预其显示/隐藏生命周期。核心思路是：禁用原生提示，改用自定义 DOM 元素 + CSS 状态控制。
✅ 正确实现步骤
-
阻止原生验证提示：在
invalid事件中调用e.preventDefault()，并使用useCapture: true确保在冒泡前拦截（关键！否则事件可能已被处理）； -
标记无效状态：为出错字段添加
.invalid类； -
绑定自定义提示：通过相邻兄弟选择器（
~）关联<input>与下方<div class="invalidmessage">，利用 CSS 控制显隐；<li> <strong>动态清除状态</strong>：监听 <code>input事件，当e.target.validity.valid === true时移除.invalid类，触发提示隐藏。 -
useCapture: true不可省略：invalid事件默认在冒泡阶段触发，而原生 tooltip 在捕获阶段已生成；若不启用捕获，preventDefault()将失效。 -
避免重复绑定：若表单动态加载，需确保事件监听器只注册一次，或使用
once: true配合委托。 -
无障碍支持（a11y）：建议为
.invalidmessage添加role="alert"和aria-live="polite"，确保屏幕阅读器可感知：<div class="invalidmessage" role="alert" aria-live="polite">⚠ 姓名不能为空！</div>
- 兼容性：该方案支持所有现代浏览器（Chrome 56+、Firefox 53+、Edge 79+、Safari 15.4+），无需 polyfill。
? 完整可运行代码示例
<form name="form01" action="" method="get">
<input type="text" name="name" required placeholder="请输入姓名" />
<input type="submit" value="提交" />
<div class="invalidmessage">⚠ 姓名不能为空！</div>
</form>
<style>
.invalidmessage {
visibility: hidden;
color: #d32f2f;
font-size: 0.875rem;
margin-top: 4px;
line-height: 1.4;
}
input.invalid ~ .invalidmessage {
visibility: visible;
}
/* 可选：增强视觉反馈 */
input.invalid {
border-color: #d32f2f;
outline: none;
}
</style>
<script>
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');
}
});
</script>⚠ 注意事项与最佳实践
通过以上方法，你完全掌控了错误提示的生命周期：它只在验证失败时出现，并严格持续至用户输入有效内容为止——真正实现「错误未解，提示不撤」的严谨交互体验。
