novalidate仅对标签生效，是布尔属性，正确写法为或；写在或上无效，且不接受值、不支持驼峰或下划线命名。

novalidate必须写在

标签上，不是或

加novalidate到<input>或<button></button>上完全无效。它只对<form></form>生效，且是布尔属性——写上就起作用，不接受任何值。

常见错误写法：novalidate="false"、noValidate（驼峰）、no-validate（带下划线）——这些浏览器都不认，等同于没写。

• <form novalidate></form> ✅ 正确
• <form novalidate=""></form> ✅ 空字符串也成立
• <input novalidate required> ❌ 无效，属性被忽略
• <button type="submit" novalidate></button> ❌ 不起作用

加了novalidate表单仍被拦住？检查这三处

提交时还弹红框或焦点卡住，大概率不是novalidate失效，而是其他逻辑在干预。

• 确认novalidate确实加在用户点击的那个<form></form>上——别嵌套多个<form></form>，也别漏掉动态生成的表单
• 检查 JS 是否调用了form.reportValidity()或input.reportValidity()：它们会无视novalidate并强行触发原生提示
• 看有没有第三方校验库（如 VeeValidate、jQuery Validation）残留监听器，它们可能自己调用checkValidity()并手动高亮

临时验证是否生效：在控制台运行document.querySelector('form').noValidate，返回true才表示属性已正确启用。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

:invalid伪类还在生效？CSS要手动重置

novalidate只禁用提交拦截，不影响浏览器根据字段值自动设置:invalid伪类。如果你用了input:invalid { border-color: red; }，输入错误时依然会变红。

• 最干净的做法：删掉所有required、pattern等校验属性，让:invalid根本没机会匹配
• 若需保留语义，可用 CSS 覆盖：form[novalidate] input:invalid { box-shadow: none; border-color: #ccc; }
• 注意移动端 Safari 有时对type="date"等控件的样式抑制不彻底，建议统一用 JS 控制状态类（如is-error）代替伪类

校验逻辑该用checkValidity()还是reportValidity()？

禁用原生校验后，checkValidity()和reportValidity()行为不同，选错会导致体验断裂。

• form.checkValidity()：只返回true/false，不弹窗、不聚焦、不改变样式——适合做纯判断，再由你决定怎么提示
• form.reportValidity()：即使表单有novalidate，它仍会尝试触发原生提示（但现代浏览器通常退化为只返回布尔值）；**不推荐用于自定义流程**
• 真正需要“模拟提交校验但不提交”时，用form.checkValidity() + 手动遍历form.elements收集错误字段更可控

别依赖form.reportValidity()来显示自定义提示——它不可定制，且行为在旧版 Safari 中不稳定。

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