novalidate必须写在<form>标签上才生效，仅禁用提交时的自动校验，不影响reportValidity()调用、伪类、键盘类型及checkValidity()返回值，多按钮场景推荐使用formnovalidate。
novalidate 必须写在 <form> 标签上才生效
加在 <input> 或 <button> 上完全无效，浏览器直接忽略。它只作用于整个表单的提交拦截逻辑，不是通用开关。
常见错误包括：no-validate（拼错）、noValidate（JS 驼峰写法不能用于 HTML 属性）、<form novalidate="false">（布尔属性不接受值，写了也当 true 处理）。
-
<form novalidate>✅ 正确且推荐 -
<form novalidate="">✅ 空字符串也有效，但语义不清 -
<form novalidate="true">❌ 无效，浏览器仍执行原生校验 -
<input novalidate>❌ 属性不被识别，无任何效果
加了 novalidate 后表单仍被拦住？检查是否调用了 reportValidity()
novalidate 只禁用“用户点击提交时的自动校验”，但不阻止你或框架代码里主动调用 reportValidity() —— 这个方法会无视 novalidate，强制弹出原生提示。
调试时可快速定位：在 submit 事件里加一行 console.log('reportValidity called?', /reportValidity/.test(e.target.innerHTML));，或全局搜索该函数调用。
立即学习“前端免费学习笔记（深入）”；
- 临时注释掉所有
reportValidity()调用，确认是否还弹窗 - 若必须保留，加守卫：
if (!form.hasAttribute('novalidate')) form.reportValidity(); -
checkValidity()安全，它只返回布尔值，不触发 UI
novalidate 不影响 :valid/:invalid 伪类和移动端键盘类型
很多人误以为加了 novalidate 就“关掉了所有验证痕迹”，其实它只动提交拦截这一环。字段仍有 required、type="email" 等属性，所以：
- 聚焦离开后，
:invalid伪类照常匹配，CSS 红框/边框依然出现 - 移动端仍会弹出邮箱键盘、数字键盘等，语义和体验不受损
-
input.validity.valid、input.checkValidity()返回值不变 - 如需隐藏红框，得额外加 CSS：
form[novalidate] input:invalid { box-shadow: none; border-color: #ccc; }
多按钮场景下优先用 formnovalidate 而非删属性
当表单有“暂存草稿”和“正式提交”两个按钮时，统一加 novalidate 再手动 JS 校验“正式提交”按钮，不如直接用 formnovalidate 更干净。
formnovalidate 是按钮级开关，只对点击该按钮生效，不影响回车提交或其它按钮，也不干扰 checkValidity() 的计算逻辑。
-
<button type="submit" formnovalidate>保存草稿</button>✅ -
<button type="button">保存草稿</button>✅ 也可，但需手动fetch，且回车无法触发 - 不要为了“统一管理”而把所有按钮都设为
type="button"，会丢失原生表单语义和回车支持
最容易被忽略的是：novalidate 把控制权交给你之后，就真的什么也不做了——它不帮你收集数据、不帮你显示错误、不阻止脏数据发出。你得立刻补上 JS 校验链，否则上线就是裸奔。
