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