本文介绍通过禁用原生 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，仅当字段通过验证时移除标记类。
以下为完整可运行示例：
<form name="form01" action="" method="get"> <input type="text" name="name" required placeholder="请输入姓名" /> <input type="submit" value="提交" /> <div class="invalidmessage">⚠️ 姓名不能为空！</div> </form>
.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"自动校验邮箱格式）； - 若需支持多个字段，该方案天然可扩展：每个
<input>后紧跟对应<div class="invalidmessage">，或通过 <code>data-for属性关联提示元素，实现精准控制。⚠️ 注意事项：
- 不要依赖
oninvalid内联属性设置setCustomValidity()来“延长”原生提示——它仅影响文案，无法改变显示生命周期； - 移动端需额外测试
input事件触发时机（部分 Android 浏览器在中文输入法下可能延迟），必要时可补充change或blur事件兜底； - 若表单含动态增删字段，建议将事件监听委托至
<form></form>元素，并用e.target.matches('input[required]')过滤目标。
通过此方案，你完全掌控错误提示的显示逻辑，既符合无障碍访问（ARIA 可配合
aria-invalid="true"和aria-describedby增强语义），又为后续集成动画、多语言或服务端错误合并预留了清晰架构基础。 - 不要依赖
