详解HTML中input标签的formnovalidate属性_跳过表单原生校验-html教程-PHP中文网

formnovalidate 仅对 type="submit" 的 button 和 input 有效，加在普通 input、select、textarea 上无效；它跳过浏览器原生提交校验但不影响 validity api 和 css 伪类；safari 兼容性差，关键场景应改用 form novalidate + 手动校验。

详解html中input标签的formnovalidate属性_跳过表单原生校验

formnovalidate 不是 input 标签的属性，它只对 <button type="submit"></button> 和 <input type="submit"> 有效。加在 <input>（如 <input type="email"> 或 <input required>）上完全无效，浏览器直接忽略。

为什么 `formnovalidate` 加在 `input` 上没反应

这是最常见的误用。很多人看到“跳过校验”，直觉就想把它加在要跳过的字段上，比如：

<input type="email" formnovalidate>

但规范明确限定：formnovalidate 是提交按钮专属的布尔属性，作用对象是“触发提交的那个元素”，不是被校验的字段。

<input type="text" formnovalidate> → 无任何效果，字段仍受 required 或 pattern 约束
<select formnovalidate></select> → 同样无效
<textarea formnovalidate></textarea> → 浏览器不识别，属性残留但不起作用

`formnovalidate` 正确该加在哪几个地方

必须同时满足两个条件：是提交控件 + 在 <form></form> 内或通过 form 属性关联。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

<button type="submit" formnovalidate>暂存</button> ✅
<input type="submit" value="放弃" formnovalidate> ✅
<button type="submit" form="myForm" formnovalidate>外部提交</button> ✅（配合 form 属性指向表单 ID）
<button formnovalidate>保存</button> ❌（缺 type="submit"，默认为 type="button"，不触发表单提交）

点带 `formnovalidate` 的按钮时，校验到底“跳过了什么”

它跳过的只是浏览器原生的提交拦截流程，不是抹除校验逻辑本身：

不触发 checkValidity() 自动调用，不弹红框、不聚焦第一个错误字段
不阻止表单提交，submit 事件照常触发
input.validity.valid、form.checkValidity() 等 API 仍返回真实状态，未被修改
:invalid 伪类依然匹配当前无效值，CSS 样式可能意外生效（尤其当表单也用了 novalidate 时更混乱）

Safari 兼容性差，别让它决定关键路径

iOS Safari 15.4–17.x 对 formnovalidate 支持不稳定，某些场景下静默失效，点击后仍弹提示框。不能靠它保底。

稳妥写法：<button type="submit" formnovalidate onclick="event.preventDefault(); this.form.submit();">暂存</button>
避免用 form.requestSubmit() —— 它会重新触发校验，哪怕按钮有 formnovalidate
如果业务强依赖“无校验提交”，优先考虑 <form novalidate></form> + JS 手动校验，而非押注 formnovalidate

真正容易被忽略的是：它只管“这次点击”，不管回车提交、JS 调用 form.submit()、也不影响其他按钮。一个表单里多个 submit 按钮，每个都得单独判断要不要加这个属性。