禁用提交按钮无法跳过HTML5表单验证,校验在表单级强制执行;唯一合法绕过方式是使用novalidate属性或formnovalidate属性。

禁用提交按钮无法跳过 HTML5 表单验证,浏览器会在 submit 事件触发前强制执行内置校验逻辑。 无论按钮是否 disabled、是否用 button 替代 input[type="submit"],只要表单通过 form.submit() 或用户点击原生提交控件,校验就一定会发生。
为什么 disabled 按钮不能绕过验证
很多人误以为把 type="submit" 按钮设为 disabled 就能“跳过校验”,其实这只是阻止了用户点击,对 JS 主动调用 form.submit() 完全无效;而即使按钮可用,只要它触发表单提交,浏览器就会先检查 checkValidity(),校验失败时会取消提交并触发 invalid 事件。
-
form.submit()方法不触发submit事件,但依然会执行校验(失败时静默失败,表单不提交) - 点击
或一定会触发校验,与是否disabled无关(disabled只是让它点不了) - 校验发生在表单级,和哪个按钮被点没有关系——只要提交源是该
,就跑不掉
真正能跳过校验的两种合法方式
HTML5 标准只允许两种明确绕过内置验证的途径,其他都是错觉或副作用:
- 给
添加novalidate属性:—— 全局禁用,所有提交都跳过校验 - 给某个提交控件添加
formnovalidate属性:—— 仅对该按钮生效,不影响其他提交方式 - 注意:
novalidate是布尔属性,写成novalidate="false"无效,必须存在即启用
常见错误做法及后果
这些操作看似“跳过”,实则埋坑:
立即学习“前端免费学习笔记(深入)”;
- 用
event.preventDefault()拦截submit事件后手动form.submit():校验仍会执行,且可能因重复提交或状态不同步导致意外失败 - 移除所有
required、pattern等属性再提交:破坏语义,影响可访问性(screen reader)和自动填充逻辑 - 用
input[type="button"]+ AJAX 提交但忘了关掉表单默认行为:如果没阻止submit事件,页面仍会刷新并尝试校验 - 设置
form.checkValidity() === false后强行submit():无效,浏览器不会提交,也不会报错,只是静默忽略
需要动态控制校验时的推荐写法
比如“保存草稿”不校验、“正式提交”要校验,应结合 formnovalidate 和 JS 控制:
注意:不要依赖 e.submitter 在旧版 Safari 的兼容性,生产环境需 fallback 判断 data-* 属性或按钮 name 值。
最易被忽略的一点:表单校验不是“开关式”的——novalidate 影响的是整个表单的验证行为,但它不会清除已存在的 :invalid 伪类样式或 validationMessage,DOM 状态和 UI 可能不同步。如果切换校验模式,记得手动调用 element.setCustomValidity('') 或重置字段。











