novalidate必须写在form标签上才生效，仅禁用用户提交时的自动校验，不影响reportvalidity()调用、伪类、键盘类型及validity api；错误写法包括拼写错误、驼峰命名、赋值等。

novalidate必须写在

上才生效

加在或上完全没用，浏览器直接忽略。它只作用于整个表单的提交拦截逻辑，不是通用开关。

常见错误写法：no-validate（拼错）、noValidate（JS驼峰写法不能用于HTML属性）、<form novalidate="false"></form>（布尔属性不接受值，写了也当true处理）。

• <form novalidate></form> ✅ 正确且推荐
• <form novalidate=""></form> ✅ 空字符串也有效，但语义不清
• <form novalidate="true"></form> ❌ 无效，浏览器仍执行原生校验
• <input novalidate> ❌ 属性不被识别，无任何效果

加了novalidate表单还被拦住？检查reportValidity()调用

novalidate只禁用“用户点击提交时的自动校验”，但不阻止你或框架代码里主动调用reportValidity()——这个方法会无视novalidate，强制弹出原生提示。

调试时可快速定位：在submit事件里加一行console.log('reportValidity called?', /reportValidity/.test(e.target.innerHTML));，或全局搜索该函数调用。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 临时注释掉所有reportValidity()调用，确认是否还弹窗
• 若必须保留，加守卫：if (!form.hasAttribute('novalidate')) form.reportValidity();
• checkValidity()安全，它只返回布尔值，不触发UI

novalidate不影响伪类、键盘类型和validity API

很多人误以为加了novalidate就“关掉了所有验证痕迹”，其实它只动提交拦截这一环。字段仍有required、type="email"等属性，所以：

• 伪类照常匹配，input:invalid CSS 红框/边框依然出现
• 移动端仍会弹出邮箱键盘、数字键盘等，语义和体验不受损
• input.validity.valid返回值不变
• 想隐藏红框？用CSS覆盖：form[novalidate] input:invalid { box-shadow: none; border-color: #ccc; }

多按钮场景优先用formnovalidate

当表单有“暂存草稿”和“正式提交”两个按钮时，统一加novalidate再手动JS校验“正式提交”按钮，不如直接用formnovalidate更干净。

formnovalidate是按钮级开关，只对点击该按钮生效，不影响回车提交或其它按钮，也不干扰checkValidity()的计算逻辑。

• 必须加在type="submit"的<button></button>或<input>上
• 按钮需在<form></form>内部，或通过form属性显式关联
• iOS Safari对formnovalidate支持不稳定，关键路径需JS兜底：onclick="event.preventDefault(); this.form.submit();"

真正容易被忽略的是：回车提交不受formnovalidate控制，只看<form></form>是否有novalidate，或默认第一个type="submit"按钮的属性。这点必须单独处理。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！