formnovalidate是<button>或<input type="submit">的布尔属性,用于点击时跳过浏览器原生校验(如required、pattern、type="email"等),直接提交表单;它仅作用于当前按钮,不影响JavaScript校验、onsubmit事件及后端校验。

formnovalidate 是什么,它跳过哪些校验
formnovalidate 是一个布尔属性,只能用在 <button> 或 <input type="submit"> 元素上,作用是让点击该按钮时,**跳过浏览器原生的表单校验(如 required、pattern、type="email" 等)**,直接提交或触发事件。
注意:它只影响当前按钮触发的提交行为,不影响其他按钮,也不影响 JavaScript 调用的 form.submit() —— 后者仍会触发校验。
为什么加了 formnovalidate 还在报错
常见错误是把它写在了错误的位置,比如加在 <form> 标签上,或加在非提交类按钮(如 type="button")上:
-
<form formnovalidate>❌ ——formnovalidate不是<form>的合法属性,会被忽略 -
<button type="button" formnovalidate>❌ ——type="button"不触发表单提交,formnovalidate无意义 -
<input type="submit" formnovalidate>✅ —— 正确用法 -
<button type="submit" formnovalidate>✅ —— 也正确
和 novalidate 属性的区别在哪
novalidate 是 <form> 的属性,作用于整个表单的所有提交行为;formnovalidate 是按钮级开关,只对当前按钮生效。
立即学习“前端免费学习笔记(深入)”;
典型场景:一个表单有两个按钮——“保存草稿”(不校验)、“正式提交”(需校验):
<form> <input name="email" required type="email"> <button type="submit">正式提交</button> <button type="submit" formnovalidate>保存草稿</button> </form>
这样,“保存草稿”点下去不会弹出“请填写此字段”,而“正式提交”仍会校验。
兼容性和潜在副作用
formnovalidate 在所有现代浏览器(Chrome、Firefox、Safari、Edge)中都支持,IE10+ 也支持,基本无兼容性问题。
但要注意两点:
- 它只跳过 HTML5 原生校验,不绕过 JavaScript 手动调用的
checkValidity()或自定义校验逻辑 - 如果表单有多个提交按钮,每个都加
formnovalidate,那整个表单就“永远不校验”了,容易漏掉必填项 - 服务端仍应做校验 ——
formnovalidate只是前端体验优化,不能替代后端防护
最常被忽略的是:开发者以为加了 formnovalidate 就等于“关掉了校验”,结果忘了服务端没做兜底,上线后发现空数据进库了。



















