formnovalidate 属性必须加在 <button type="submit"> 或 <input type="submit"> 上且位于 <form> 内；它仅对提交按钮生效，用于单按钮跳过校验，与表单级 novalidate 互斥但优先级更高。
formnovalidate 属性该加在哪个按钮上
必须加在 <button type="submit"> 或 <input type="submit"> 元素上，且该按钮需位于 <form> 内部。它只对提交按钮生效，对 type="button" 或普通链接无效。
常见错误是加在表单外的按钮、或加在非 submit 类型的按钮上，此时属性完全被忽略。
- ✅ 正确：
<button type="submit" formnovalidate>取消</button> - ❌ 无效：
<button type="button" formnovalidate>重置</button> - ❌ 无效：
<button formnovalidate>（缺 type="submit"）</button>
和 form 的 novalidate 属性有什么区别
novalidate 是 <form> 的布尔属性，作用于整个表单——所有提交按钮都会跳过校验；而 formnovalidate 是按钮级控制，只影响当前按钮，其余 submit 按钮仍按规则校验。
典型场景：一个表单有「保存」和「放弃」两个提交按钮，「保存」需校验必填项，「放弃」应无条件提交（如清空草稿）。这时不能给整个 <form> 加 novalidate，否则「保存」也绕过了校验。
立即学习“前端免费学习笔记（深入）”；
- 用
novalidate→ 全表单禁用校验（全局开关） - 用
formnovalidate→ 单按钮临时豁免（精准控制） - 二者可共存，但
formnovalidate优先级更高
浏览器兼容性与实际表现差异
Chrome、Firefox、Edge（Chromium 内核）、Safari 15.4+ 均支持 formnovalidate，但 Safari 早期版本（≤15.3）存在 bug：点击带 formnovalidate 的按钮时，仍会触发 checkValidity() 和红色提示框。
如果需兼容旧 Safari，建议额外加 JS 阻断默认行为：
<button type="submit" formnovalidate onclick="event.preventDefault(); this.form.submit();">放弃</button>
- 原生
formnovalidate在现代浏览器中足够可靠 - 不推荐用 JS 全面接管校验逻辑来“模拟”该功能，会破坏语义和可访问性
- 注意：
formnovalidate不影响required属性本身的存在，只是跳过其校验逻辑
配合后端处理时容易忽略的关键点
前端跳过校验 ≠ 后端可以省略校验。用户仍可能通过 DevTools 删除 formnovalidate、或直接 POST 请求绕过前端限制。
所以「放弃」类按钮提交的数据，后端仍需明确识别意图（例如靠按钮的 name 或 value），并执行对应逻辑（如清空 session 而非存入数据库）。
- 推荐写法：
<button type="submit" name="action" value="discard" formnovalidate>放弃</button> - 后端检查
action === "discard"，则跳过业务字段校验，直接执行退出/清空流程 - 不要依赖前端是否触发了校验，来决定后端是否做数据清洗
真正容易被忽略的是：这个属性只解决“提交时不弹红框”，不代表数据安全或业务逻辑自动适配——它只是个轻量级交互开关，不是信任边界。
