novalidate属性必须加在<form>标签上才有效,仅禁用浏览器原生验证(如required、type="email"等)和UI提示,不影响JS验证API及表单语义;formnovalidate用于提交按钮级临时豁免。

novalidate 属性加在 <form> 上才有效
很多人试过给 <input> 或 <button> 加 novalidate,发现完全没用——这个属性只对 <form> 元素生效,是表单级开关,不是字段级配置。浏览器遇到带 novalidate 的 <form>,会跳过所有原生约束验证(比如 required、type="email"、pattern 等),连提交时的弹窗提示都不会出现。
正确写法只有这一种:
<form novalidate> <input type="email" required> <button type="submit">提交</button> </form>
-
novalidate是布尔属性,写上即生效,不用赋值(novalidate="false"这种写法反而会让它“开启”验证) - 它不影响 JavaScript 调用的
checkValidity()或reportValidity(),这些 API 仍会按规则执行 - 如果表单同时有
novalidate和 JS 手动验证逻辑,注意别让两者行为冲突(比如 JS 验证失败却仍允许提交)
想局部绕过验证?formnovalidate 才是按钮专用属性
如果只是某个提交按钮(比如“暂存草稿”)不想触发验证,而其他按钮(如“正式提交”)仍需校验,就不能用 novalidate——它会关掉整个表单的验证。此时该用 formnovalidate,且必须加在 <button type="submit"> 或 <input type="submit"> 上。
示例:
立即学习“前端免费学习笔记(深入)”;
<form> <input type="email" required> <button type="submit">正式提交(会验证)</button> <button type="submit" formnovalidate>保存草稿(不验证)</button> </form>
-
formnovalidate仅作用于当前按钮触发的提交,不影响其他提交方式(如 JS 的form.submit()) - 它和
novalidate不互斥:表单有novalidate时,formnovalidate按钮行为不变;但表单没novalidate时,只有带formnovalidate的按钮能跳过验证 - 注意兼容性:
formnovalidate在 IE 中不支持,如需兼容旧版 IE,得靠 JS 拦截 submit 事件并调用preventDefault()
关闭验证 ≠ 关闭交互反馈,用户仍可能看到 placeholder 或 value 变化
novalidate 只禁用浏览器原生验证逻辑和 UI 提示(红边框、气泡错误信息等),但不会阻止其他视觉反馈。比如:
- 输入框的
placeholder依然显示 - JS 绑定的
input或blur事件照常触发,可能意外触发自定义样式(如清空时加灰色边框) - 某些浏览器(如 Safari)在
novalidate下仍会对type="email"做基础格式高亮(键盘类型切换),但这不属于验证行为
如果你发现关闭验证后仍有红色边框或提示,大概率是 CSS 里写了 :invalid 伪类样式,或者 JS 主动添加了 class。检查开发者工具的 computed styles,确认是否来自 :invalid 或 .error 类。
服务端永远不能信任 novalidate
这个属性纯属客户端控制,对服务端毫无影响。用户禁用 JS、手动改 HTML、用 curl 提交,都能绕过它。所以:
- 哪怕用了
novalidate,后端接口仍必须做完整参数校验和清洗 - 不要因为前端关了验证,就省略后端的
email格式检查或required字段判空 - 如果业务上真不需要某字段必填,应该在后端 API 文档和数据库 schema 层面明确允许 NULL 或默认值,而不是靠前端“假装它不重要”
最容易被忽略的是:开发时本地测试关了验证,上线后忘了补服务端校验,结果收到大量脏数据——novalidate 是便利开关,不是免责条款。



















