HTML属性Formnovalidate：临时跳过表单校验的场景解析

formnovalidate仅对type="submit"的button或input有效，且仅豁免单次提交校验；加在其他元素上无效，Safari存在兼容问题，需用form.submit()兜底并注意:invalid伪类仍生效。

formnovalidate只能加在submit按钮上，加错位置就失效

很多人把 formnovalidate 写在 <input type="text"> 或 <div> 上，结果完全没反应——它只对 <button type="submit"> 和 <input type="submit"> 有效。浏览器根本不理其他元素上的这个属性。

常见错误写法：<input type="email" formnovalidate> ✅ 看起来像能跳过邮箱校验，实际无效；<button formnovalidate>保存草稿</button> ❌ 漏了 type="submit"，默认是 type="button"，不触发表单提交，自然也不走校验流程。

• <button type="submit" formnovalidate>暂存</button> —— 正确，点击时绕过所有原生校验
• <input type="submit" value="下一步" formnovalidate> —— 同样生效
• 若用 <button> 但没写 type，多数浏览器按 submit 处理，但不可靠，必须显式声明

formnovalidate是“单次豁免”，不是全局开关

formnovalidate 的作用范围非常明确：仅影响**这一次点击触发的提交行为**。它不会改变表单本身的校验状态，也不会影响其他按钮、回车提交、或 JS 调用 form.reportValidity() 的结果。

典型误用场景：用户点了带 formnovalidate 的“暂存”按钮，成功跳过校验；但随后又点“确认提交”按钮（没加该属性），此时浏览器照常弹红框、拦提交——因为 formnovalidate 并未修改 required 或 type="email" 这些属性本身。

立即学习“前端免费学习笔记（深入）”；

• 适合多步骤表单中“上一步/保存草稿”这类非终局操作
• 不适合想彻底关闭校验的场景——那种情况该用 novalidate 放在 <form> 上
• 如果表单里有多个 submit 按钮，每个都需要独立控制，就得分别加 formnovalidate 或不加，不能“批量设置”

Safari 对 formnovalidate 支持不稳定，需降级兜底

截至 2026 年，Safari（尤其是 iOS 16–17）对 formnovalidate 的实现存在兼容性问题：某些版本下它会静默失效，点击按钮仍触发原生校验提示。这不是 bug，而是规范实现差异。

安全做法是双保险：给按钮加 formnovalidate 的同时，在 click 事件里手动调用 form.submit()（注意不是 form.requestSubmit()，后者会重新触发校验）。

• form.requestSubmit() 会强制执行原生校验，即使按钮有 formnovalidate
• form.submit() 完全跳过所有 HTML5 验证逻辑，但也会丢失浏览器原生反馈（如 focus 到第一个错误字段）
• 兜底代码示例：button.addEventListener('click', () => { form.submit(); });，且确保按钮不触发默认 submit 行为（比如加 type="button" 或 e.preventDefault()）

formnovalidate 和 CSS :invalid 伪类不冲突，但视觉容易误导

加了 formnovalidate 后，浏览器确实不拦提交、不弹提示，但它**不会清除字段当前的 validity 状态**。也就是说，如果用户输了个非法邮箱，input.validity.valid 仍是 false，CSS 里的 input:invalid 样式照常生效——边框变红、背景变黄，看起来像“还在校验”。

这常导致开发者困惑：“我都加了 formnovalidate，怎么输入框还红？” 实际上，红只是样式反馈，和提交拦截无关。

• 若想同步清除视觉反馈，需 JS 手动调用 input.setCustomValidity('') + input.checkValidity()
• 更稳妥的做法是：在“暂存”类操作前，统一重置所有字段的自定义错误状态
• 别依赖 :invalid 判断是否“正在校验”，它反映的是字段值是否符合约束，而非提交是否被允许

真正容易被忽略的点是：formnovalidate 只解决“这次点按钮要不要拦”，它不碰 DOM 属性、不改 JS API 行为、也不影响 CSS 伪类。你以为关掉了一个开关，其实只是按下了暂停键——背后的 validity 计算、样式规则、事件触发，全都还在后台运行。