novalidate必须写在form标签上才生效，正确写法为或，其他写法及位置均无效；它仅禁用提交时的原生验证拦截，不影响伪类、checkvalidity()等校验逻辑。

novalidate必须写在

标签上才生效

它只对

起作用，加在或上完全无效。浏览器会直接忽略novalidate出现在其他标签上的写法。

正确写法只有两种：<form novalidate></form> 或 <form novalidate=""></form>。所有带值的写法——比如novalidate="false"、noValidate（驼峰）、no-validate（带下划线）——都不被识别，等同于没写。

常见踩坑点：

• 嵌套多个时，只在外层加了novalidate，但实际提交的是内层表单
• 动态生成的表单漏掉该属性，尤其在 Vue/React 中用条件渲染时容易误留
• 用 JS 创建表单后，忘记手动设置form.noValidate = true（等价于加属性）

加了novalidate表单还被拦住？先查这三处

novalidate只禁用“用户点击提交时的原生拦截”，不阻止 JS 主动调用校验方法。如果提交仍弹红框或焦点卡住，大概率是以下原因：

• JS 里调用了form.reportValidity()或input.reportValidity()——这个方法会无视novalidate，强行触发原生提示
• 第三方校验库（如 VeeValidate、Formik）残留监听器，自己调用checkValidity()并手动高亮
• 表单里还有required、pattern等属性，CSS 用了input:invalid规则，导致视觉上像“还在验证”

快速验证是否生效：在控制台运行document.querySelector('form').hasAttribute('novalidate')，返回true才表示属性已正确挂载。

novalidate不影响伪类和checkValidity()返回值

加了novalidate后，:valid/:invalid伪类依然匹配，input.validity.valid和form.checkValidity()也照常返回布尔值。它只关掉了“提交时自动弹窗+阻止提交”这一环。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

如果你不想看到红边框或阴影，得配合 CSS 覆盖：

form[novalidate] input:invalid {
  box-shadow: none;
  border-color: #ccc;
}

注意：移动端 Safari 对某些控件（如type="date"）的样式抑制不彻底，更稳妥的做法是用 JS 控制is-error类，而不是依赖伪类。

多按钮场景优先用formnovalidate

当一个表单有“暂存草稿”和“正式提交”两个按钮时，不要给整个表单加novalidate再用 JS 区分逻辑，而是直接在按钮上用formnovalidate：

<button type="submit" formnovalidate>保存草稿</button>

这样只对该按钮生效，不影响回车提交、其他按钮，也不干扰checkValidity()的计算结果。它比全局禁用更精准，也更容易维护。

真正容易被忽略的是：即使你写了novalidate，只要字段还挂着required，浏览器就一直在算validity状态——这个计算本身无法关闭，只能靠 JS 或 CSS 去掩盖表现。

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