HTML button元素使用formnovalidate属性如何实现绕过表单验证的高级操作？

本文共计1036个文字，预计阅读时间需要5分钟。

`formnovalidate` 是一个布尔属性，仅适用于 `` 元素。它指示浏览器在表单提交时不执行表单验证。这使得当表单被提交时，浏览器不会按照默认的验证规则来检查表单输入，从而跳过验证过程。

常见错误现象：formnovalidate 加在 <button type="button"> 上完全无效；加在 Safari 的 iOS 15.4+ 里仍可能被忽略；加了却没看到效果，大概率是按钮没设 type="submit"。

• 必须配合 type="submit" 使用，否则不触发表单提交，formnovalidate 就没意义
• 它优先级高于 <form novalidate>：哪怕表单本身没加 novalidate，只要某个提交按钮带 formnovalidate，点它就跳过
• 不改变字段的 validity 状态——input.validity.valid 还是照常计算，checkValidity() 也依然返回正确布尔值

什么时候该用 formnovalidate，而不是给整个 form 加 novalidate

典型场景是「多按钮语义分离」：一个“保存草稿”，一个“正式提交”。前者不该被 required 拦住，后者必须校验。

如果全用 <form novalidate>，你就得手动为每个按钮补 JS 校验逻辑，反而更重；而 formnovalidate 让你保留原生校验能力，只对特定按钮做豁免。

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

• ✅ 适合：<button type="submit" formnovalidate>暂存</button> + <button type="submit">提交</button>
• ❌ 不适合：想让所有提交都跳过校验——这时直接用 <form novalidate> 更干净
• ⚠️ 注意：formnovalidate 不影响 CSS 中的 :invalid 伪类行为；但如果你同时用了 novalidate 在 form 上，:invalid 就不会更新（因为浏览器停止跟踪有效性）

formnovalidate 的兼容性与写法陷阱

它在 Chrome、Firefox、Edge、Opera 都支持，但 Safari（包括 iOS 15.4+）仍有兼容问题，不能作为关键路径依赖。

写法上，HTML5 允许简写：<button formnovalidate>；XHTML 要求显式赋值：<button formnovalidate="formnovalidate">。混用时容易漏掉 type="submit"，导致按钮根本没提交行为。

• 错误写法：<button formnovalidate>跳过</button>（缺 type="submit"）
• 正确写法：<button type="submit" formnovalidate>跳过</button>
• 兼容写法（防 Safari）：<button type="submit" onclick="event.preventDefault(); submitDraft()">暂存</button>，把逻辑收归 JS

加了 formnovalidate 后，为什么 reportValidity() 还弹窗

因为 formnovalidate 只影响「提交触发时是否自动校验」，不阻止你手动调用 reportValidity() 或 checkValidity()。

如果你在 submit 事件里写了 e.preventDefault(); form.reportValidity();，那无论有没有 formnovalidate，都会弹原生提示——这不是 bug，是设计如此。

• 真正想禁用弹窗，得靠 event.preventDefault() 拦住事件，再自己决定是否调用 reportValidity()
• formnovalidate 和 novalidate 都不干涉 invalid 事件触发，监听它仍可捕获字段失效
• 若你用 JS 做校验但还想保留红边框等视觉反馈，别依赖 :invalid，改用 class 控制，比如 input.is-invalid

实际项目中，最容易被忽略的是：以为加了 formnovalidate 就万事大吉，结果在 Safari 里功能断裂，又没 fallback；或者误以为它会抑制 invalid 事件或 :invalid 样式，导致视觉和逻辑脱节。