iOS Safari 的 required 验证常静默失效：校验触发但无气泡提示，submit 拦截后需手动 reportValidity()，隐藏元素设 required 易致提交失败且无反馈，动态设置须同步可见性与 required 状态。
required 属性在 Safari iOS 上不弹提示，不等于它没生效——多数情况是验证触发了，但气泡提示被静默吞掉，或根本没走到验证阶段。
为什么 iOS Safari 不显示 required 提示气泡
原生 required 验证逻辑在 iOS Safari（尤其是 15.4 之前）对某些控件存在“只校验、不提示”的行为。典型表现是：表单提交被阻止，页面无响应，控制台也没报错，用户完全不知道哪错了。
-
<select>的required在 iOS 12.2 之前完全不触发验证（连拦截都没有） -
<input type="date">+required在未选日期时，checkValidity()返回false，但reportValidity()不弹气泡（iOS 15.4 之前） - 部分老版本 Safari 对
display: none或visibility: hidden元素的验证状态判断异常，导致本该跳过的字段仍参与校验
submit 事件被 JS 拦截后 required 彻底失效
这是跨平台通病，但在 Safari 上更隐蔽：只要你在 form.addEventListener('submit', e => { e.preventDefault(); }) 里写了 e.preventDefault()，浏览器就放弃所有原生验证流程，required 形同虚设。
- 错误写法：
form.submit()手动调用 → 绕过所有验证 - 正确补救：
e.preventDefault()后必须显式调用form.reportValidity()，否则用户看不到任何反馈 - 注意：Safari 对
:invalid伪类的样式支持较晚，input:required:invalid可能不生效，别依赖它做视觉提示
动态添加 required 时 DOM 状态与验证时机错位
iOS Safari 对“不可见但 required”的字段特别敏感。比如一个 display: none 的 <input id="other-text"> 被 JS 设了 required = true，即使用户没点“其他”选项，提交时也会因它为空而失败，且不提示具体字段。
- 不要批量设
required = true，尤其不能对隐藏元素设 - 务必同步可见性与 required 状态：
textBox.style.display = 'block'; textBox.required = true;和textBox.style.display = 'none'; textBox.required = false;必须成对出现 - 若用 Vue/React，确保
required是真实渲染到原生<input>上的属性，而不是挂在自定义组件上
最易被忽略的一点：Safari 的 reportValidity() 在某些混合渲染场景（如 modal 内表单、contenteditable 模拟输入）下可能不聚焦首个无效项——得手动 querySelector(':invalid')?.focus()，否则用户卡在看不见的错误里。
