Safari移动端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 的 被 JS 设了 required = true，即使用户没点“其他”选项，提交时也会因它为空而失败，且不提示具体字段。

• 不要批量设 required = true，尤其不能对隐藏元素设
• 务必同步可见性与 required 状态：textBox.style.display = 'block'; textBox.required = true; 和 textBox.style.display = 'none'; textBox.required = false; 必须成对出现
• 若用 Vue/React，确保 required 是真实渲染到原生 上的属性，而不是挂在自定义组件上

最易被忽略的一点：Safari 的 reportValidity() 在某些混合渲染场景（如 modal 内表单、contenteditable 模拟输入）下可能不聚焦首个无效项——得手动 querySelector(':invalid')?.focus()，否则用户卡在看不见的错误里。

文中关于常见HTML属性兼容性问题有哪些的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Safari移动端required失效原因分析》文章吧，也可关注golang学习网公众号了解相关技术文章。