novalidate 必须加在<form>标签上且为布尔属性，加后需用JavaScript接管校验；它不影响checkValidity等API，但禁用原生提示和:valid/:invalid伪类更新。
加 novalidate 是让浏览器彻底跳过提交时的原生校验，但不等于“关掉验证”——它只是把控制权交给你，而你必须立刻用 JavaScript 接住。
怎么加才真正生效
novalidate 只能写在 <form> 标签上，其他地方加了也白加。它是布尔属性，写上即生效，不接受值：novalidate="true"、novalidate="" 都冗余；novalidate="false" 更是无效写法，浏览器会当成字符串值处理，实际仍启用禁用逻辑。
常见错误包括：
- 把
novalidate加到<input>或<button>上（完全无效） - 表单用了 Vue/React 动态渲染，但没在初始 HTML 中声明
novalidate，导致 SSR 阶段仍触发原生弹窗 - 在 Safari 15.6 之前版本中使用，该属性不被支持（2026 年已基本无影响，但遗留系统需留意）
加了之后，哪些 JS API 还能用
novalidate 不影响 checkValidity()、reportValidity()、setCustomValidity() 等方法的调用能力，也不改变 input.validity 对象的计算结果。但行为有关键差异：
立即学习“前端免费学习笔记（深入）”；
-
form.checkValidity()仍返回false（比如必填字段为空），但浏览器不再自动阻止提交 -
input.reportValidity()在novalidate表单中不会弹出原生提示框，只返回布尔值 —— 所以别依赖它做 UI 反馈 -
:valid和:invalidCSS 伪类会“卡住”，不再随输入内容动态更新（例如填完邮箱后边框颜色不从红变绿），需靠 JS 手动切换 class
为什么不能只靠 removeAttribute('required')
移除 required 属性看似简单，但它只解决一个字段的一个约束，而 HTML5 校验还涉及 type="email"、pattern、minlength、max 等多个维度。更麻烦的是：
- 用户可能粘贴非法内容，或通过 DevTools 修改 DOM 绕过前端限制
- 不同字段的错误文案来源不一：
validationMessage在 Safari 中常为空，Chrome 返回英文，无法统一控制 - 异步校验（如用户名是否已存在）必须收口到同一套 JS 流程里，否则状态难以同步
所以真正可控的做法是：保留所有语义化属性（辅助移动端键盘、无障碍读取），但用 novalidate + e.preventDefault() + 自定义校验函数兜底。
配合 submit 事件的最小可行代码结构
这是最常被写错的一环：加了 novalidate 却没监听 submit，结果表单直接裸奔提交。
const form = document.getElementById('myForm');
form.addEventListener('submit', function(e) {
e.preventDefault(); // 必须！否则 novalidate 就没意义
if (validateForm()) {
// 可选：form.submit() 触发原生提交（不走 fetch）
// 或 fetch('/api/submit', { method: 'POST', body: new FormData(form) })
}
});
function validateForm() {
let isValid = true;
for (const input of form.elements) {
if (!input.checkValidity()) {
isValid = false;
// 清除旧提示，插入自定义 error message
showCustomError(input, input.validationMessage || '请检查格式');
}
}
return isValid;
}
注意：form.elements 包含 input、select、textarea，但不包括 button；若用 Web Components 封装的输入控件，需额外约定校验接口。
最容易被忽略的点是：加了 novalidate 后，:valid/:invalid 伪类失效，且 reportValidity() 不再弹窗 —— 这不是 bug，是设计使然。你得主动接管样式和反馈，而不是等浏览器“帮忙”。
