Bootstrap 5 的 setCustomValidity() 不生效，需确保控件在 form 内且有 name 属性；title 属性会覆盖提示语，须移除；.invalid-feedback 需手动同步内容；iOS Safari 原生气泡文案不可改，应禁用 novalidate 并 JS 全权控制。
Bootstrap 5 的 setCustomValidity() 不生效？检查表单控件是否在 form 内
Bootstrap 表单验证提示语依赖原生 HTML5 表单验证机制，setCustomValidity() 只对处于 form 元素内部、且具有 name 属性的控件有效。常见错误是把 input 直接写在页面 body 里，或忘了加 name —— 这时调用 setCustomValidity("xxx") 完全没反应，控制台也无报错。
实操建议：
- 确保每个要验证的
input、select、textarea都包裹在<form></form>中，并有name属性（哪怕只是占位用，如name="email"） - 不要依赖 Bootstrap 自带的
.is-invalid类来“触发”提示语；它只负责样式，不参与原生验证逻辑 - 验证逻辑必须通过
checkValidity()或提交事件触发，不能仅靠setCustomValidity()设置就立刻显示
怎么让 title 属性不覆盖自定义提示？禁用原生 tooltip
当输入框有 title 属性时，Chrome/Firefox 会在原生验证失败时优先显示 title 值，而不是 setCustomValidity() 设置的内容。这是最容易被忽略的冲突点。
解决方法很简单，但必须显式处理：
- 移除所有验证控件的
title属性（包括空字符串title=""） - 如果需要保留 tooltip 功能，改用 Bootstrap 的
data-bs-toggle="tooltip"+ JS 初始化，它和表单验证互不干扰 - 验证前可加一行清理：
inputElement.removeAttribute('title');
如何配合 Bootstrap 的 .invalid-feedback 显示自定义文案？手动同步状态
Bootstrap 的 .invalid-feedback 默认只响应原生 validity.valid === false 和 validationMessage，但它不会自动读取你用 setCustomValidity() 设置的值并渲染——它只在表单提交或 reportValidity() 被调用后才更新。
所以实际开发中，得自己接管反馈逻辑：
- 监听
input或blur事件，手动校验并设置setCustomValidity() - 紧接着调用
inputElement.reportValidity()（触发原生验证并显示气泡），再同步更新对应.invalid-feedback的文本内容 - 示例片段：
emailInput.addEventListener('blur', () => { if (!emailInput.value || !emailInput.value.includes('@')) { emailInput.setCustomValidity('请输入有效的邮箱地址'); } else { emailInput.setCustomValidity(''); } emailInput.reportValidity(); // 必须调用，否则 .invalid-feedback 不更新 const feedback = emailInput.nextElementSibling; if (feedback && feedback.classList.contains('invalid-feedback')) { feedback.textContent = emailInput.validationMessage; } });
为什么移动端 iOS Safari 提示语总显示英文？强制重写 validationMessage 无效
iOS Safari（尤其是旧版本）会忽略 setCustomValidity() 设置的中文提示，坚持显示 “Please fill out this field” 这类系统级翻译。这不是 Bug，而是 Safari 对原生验证气泡文案的硬编码限制，无法通过 JS 覆盖。
可行方案只有绕过原生气泡：
- 禁用原生验证：给表单加
novalidate属性，完全自行控制验证流程 - 用
addClass('is-invalid')+ 手动更新.invalid-feedback文本，实现一致 UI - 提交时用
preventDefault()，集中校验所有字段，统一展示提示（推荐用于多语言项目） - 注意：不要试图用
inputElement.validationMessage = 'xxx'—— 该属性只读，赋值无效
.invalid-feedback 的内容和样式，而气泡文案在部分浏览器上始终受限。别在 setCustomValidity() 上过度纠结兼容性，把交互逻辑收归 JS 控制更可靠。 
