chrome/edge 中隐藏的 required 元素会导致表单提交失败，因其校验时尝试聚焦不可见字段而中止流程；应于隐藏前移除 required、清空 value 或设为 disabled，而非依赖 css 隐藏或 novalidate。
隐藏元素带 required 属性时，表单提交会失败并报错 An invalid form control with name='' is not focusable——这不是 bug，而是 Chrome/Edge 等浏览器的明确行为：它想把焦点移到未填的必填项上提示用户，但该控件不可见、无法聚焦，于是直接阻断提交。
为什么 display:none 或 visibility:hidden 的 required 元素会出问题
浏览器原生校验逻辑在 submit 时会尝试聚焦所有未通过验证的 required 字段。一旦发现某个字段是 display: none 或 visibility: hidden，就判定“无法聚焦”，立刻中止提交流程，连 submit 事件都不会触发。
常见场景包括：选项卡切换后隐藏某组字段、条件显示的输入框（如“选 Other 后展开文本框”）、模态框内动态加载的表单。
-
opacity: 0不触发该错误（元素仍可聚焦） -
disabled会让字段跳过校验，但也会导致其值不被提交 -
required属性本身对hidden类型 input 无效，但若你用的是text却设了display: none，那就真会卡住
隐藏前必须移除 required 或清空 value
最稳妥的做法不是等提交时再处理，而是在隐藏动作发生时主动干预：
- 如果只是临时隐藏，且字段内容无关紧要 → 隐藏前执行
element.removeAttribute("required") - 如果字段可能有残留错误状态（比如之前输过非法 email，然后切走）→ 隐藏前设
element.value = ""，再移除required - 如果字段本就不该参与当前提交 → 改用
disabled = true，它既跳过校验，又避免聚焦失败
注意：不要只靠 CSS 隐藏还留着 required，也不要依赖 novalidate——那是绕过校验，不是解决问题。
动态添加 required 时 DOM 必须已挂载
用 JS 动态插入表单控件（比如 Vue/React 渲染后、AJAX 加载的片段），再加 required 属性，容易失效。原因很简单：浏览器只在元素插入 DOM 后解析属性。
- 确保
required是在element.parentNode !== null之后设置的 - 避免在 document fragment 中提前设
required，再 append 到页面——fragment 不触发校验初始化 - React/Vue 中，不要在组件未 mount 前操作 DOM 属性；Vue 用户可用
v-if替代v-show，天然规避 hidden + required 冲突
真正麻烦的不是怎么修，而是容易忽略“隐藏动作和校验状态的耦合”——哪怕你没写 required，只要字段之前验证失败过，再隐藏就会触发这个错误。所以关键判断点永远是：这个字段此刻是否应该参与本次提交？答案是否定的，那就别让它带着校验语义活着。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
