禁用提交按钮无法跳过html5表单验证,校验在表单级强制执行;唯一合法绕过方式是使用novalidate属性或formnovalidate属性。
禁用提交按钮无法跳过 HTML5 表单验证,浏览器会在 submit 事件触发前强制执行内置校验逻辑。 无论按钮是否 disabled、是否用 button 替代 input[type="submit"],只要表单通过 form.submit() 或用户点击原生提交控件,校验就一定会发生。
为什么 disabled 按钮不能绕过验证
很多人误以为把 type="submit" 按钮设为 disabled 就能“跳过校验”,其实这只是阻止了用户点击,对 JS 主动调用 form.submit() 完全无效;而即使按钮可用,只要它触发表单提交,浏览器就会先检查 checkValidity(),校验失败时会取消提交并触发 invalid 事件。
-
form.submit()方法不触发submit事件,但依然会执行校验(失败时静默失败,表单不提交) - 点击
<button type="submit"></button>或<input type="submit">一定会触发校验,与是否disabled无关(disabled只是让它点不了) - 校验发生在表单级,和哪个按钮被点没有关系——只要提交源是该
<form></form>,就跑不掉
真正能跳过校验的两种合法方式
HTML5 标准只允许两种明确绕过内置验证的途径,其他都是错觉或副作用:
- 给
<form></form>添加novalidate属性:<form novalidate></form>—— 全局禁用,所有提交都跳过校验 - 给某个提交控件添加
formnovalidate属性:<button type="submit" formnovalidate>不校验提交</button>—— 仅对该按钮生效,不影响其他提交方式 - 注意:
novalidate是布尔属性,写成novalidate="false"无效,必须存在即启用
常见错误做法及后果
这些操作看似“跳过”,实则埋坑: