formnovalidate是<button type="submit">或<input type="submit">的布尔属性，点击时跳过浏览器原生表单验证（如required、pattern、type="email"等），但仅作用于当前按钮，不绕过JavaScript校验、submit事件及后端校验。
formnovalidate 是什么，它真能绕过整表验证？
formnovalidate 是 <input type="submit"> 或 <button type="submit"> 上的一个布尔属性，作用是：**点击该按钮提交时，跳过浏览器对整个表单的原生约束验证（比如 required、pattern、type="email" 等）**。但它不是“绕过验证”的万能钥匙——它只影响当前触发提交的按钮所关联的表单，且仅跳过 HTML5 原生验证，不触碰 JavaScript 手动调用的 checkValidity() 或自定义逻辑。
常见误解是以为加了 formnovalidate 就能无视所有校验，结果后端仍收到非法数据。实际上，它只是让浏览器不弹出默认提示、不阻止表单提交，但 submit 事件依然会触发，JS 里的验证逻辑照常运行。
怎么正确使用 formnovalidate 属性
必须配合 type="submit" 才生效，普通 button 或 input type="button" 加了也没用：
<form id="myForm"> <input name="email" required type="email"> <!-- ✅ 正确：submit 按钮 + formnovalidate --> <button type="submit" formnovalidate>跳过验证提交</button> <!-- ❌ 无效：普通 button 不触发 submit 行为 --> <button formnovalidate>这个不会提交也不会跳过验证</button> </form>
-
formnovalidate和form属性可共存，用于跨表单按钮（即按钮不在<form>内部） - 多个 submit 按钮可混用：
formnovalidate按钮跳过验证，其他按钮保留验证 - 如果表单有
onsubmit="return false"或event.preventDefault()，formnovalidate会被完全忽略——因为提交行为已被拦截
为什么加了 formnovalidate 还被拦住？常见坑
你以为加了就万事大吉，但实际可能卡在这些地方：
立即学习“前端免费学习笔记（深入）”；
- 表单里存在
input设置了required且未填，但你误用了<input type="button">而非type="submit"——formnovalidate对前者完全无效 - JS 中监听了
submit事件并手动调用event.target.checkValidity()，这个检查不受formnovalidate影响 - 某些浏览器（如旧版 Safari）对
formnovalidate支持不完整，尤其在动态添加属性时需重新绑定或触发重绘 - 表单设置了
novalidate全局属性，此时所有 submit 按钮都默认跳过验证，formnovalidate反而变得多余
真正想“绕过验证”，你得控制好边界
formnovalidate 的本质是“让这个按钮不触发浏览器默认校验”，不是“关闭校验”。如果你的目标是部分场景跳过前端验证（比如草稿保存），更稳妥的做法是：
- 用不同
name区分操作类型：<button type="submit" name="action" value="draft">存草稿</button>，后端根据action值决定是否校验字段 - 移除临时验证属性：
document.querySelector('[name="email"]').removeAttribute('required')，比依赖formnovalidate更可控 - 避免在
submit处理函数中无条件调用checkValidity()—— 应先判断按钮的name或value
最易被忽略的一点：formnovalidate 只影响当前表单的原生验证，对自定义 setCustomValidity() 无效。如果某个输入框曾调用过 input.setCustomValidity('xxx')，即使点了 formnovalidate 按钮，只要该输入框的 validity.customError 为 true，表单仍会被认为无效（Chrome 115+ 已修复此行为，但低版本仍存在）。
