HTML中input标签formnovalidate关闭验证的使用方法-html教程-PHP中文网

formnovalidate仅对type="submit"或type="image"按钮有效，用于单次提交跳过html5原生验证；它不作用于输入框，且与novalidate配合时优先级更高，但checkvalidity()仍返回true。

html中input标签formnovalidate关闭验证的使用方法

formnovalidate 属性只对 type="submit" 或 type="image" 有效

很多人加了 formnovalidate 却发现表单依然校验，根本原因是它只作用于提交按钮，而不是普通输入框。给 <input type="text"> 或 <input type="email"> 加这个属性完全没效果，浏览器直接忽略。

正确用法是把它放在触发提交的控件上，比如：

formnovalidate 是布尔属性，写上即生效，不用赋值（formnovalidate="false" 是错的）
同一表单可有多个提交按钮，部分带 formnovalidate、部分不带，实现“保存草稿（不校验）”和“正式提交（校验）”双路径
它绕过的是 HTML5 原生验证（required、type="email"、pattern 等），不影响 JavaScript 手动调用的 checkValidity()

和 novalidate 属性的区别：作用范围不同

novalidate 是写在 <form></form> 标签上的，它让整个表单所有提交都跳过原生验证；而 formnovalidate 是写在某个提交按钮上的，只影响点击它时的这一次提交。

典型误用：<form novalidate><input type="submit" formnovalidate></form> —— 这里 formnovalidate 多余，因为 novalidate 已全局关闭。

html-deploy

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

下载

需要灵活控制时选 formnovalidate（如“暂存”按钮）
整站表单都禁用原生校验（比如全用 JS 校验库），直接在 <form></form> 上加 novalidate 更干净
两者同时存在时，formnovalidate 按钮的优先级更高，但行为一致：都不触发原生校验

点击 formnovalidate 按钮后，checkValidity() 仍返回 true

这是最容易困惑的点：即使点了带 formnovalidate 的按钮，调用 form.checkValidity() 依然返回 true，因为该方法只检测字段状态，不感知触发源。

如果你在提交前手动调用校验逻辑，需要自己判断是否应跳过：

form.addEventListener('submit', e => {
  if (e.submitter && e.submitter.hasAttribute('formnovalidate')) {
    // 显式跳过校验逻辑
    return;
  }
  if (!form.checkValidity()) e.preventDefault();
});

e.submitter 是标准属性，现代浏览器均支持，指向实际被点击的提交控件
不要依赖 event.target，它可能是 form 元素本身
服务端永远要重新校验，formnovalidate 仅影响前端提示，不改变数据合法性

兼容性与移动端注意事项

formnovalidate 在 Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+ 都支持，IE10+ 也支持，基本无需降级处理。

但要注意移动端 Safari 对 type="image" 提交按钮的 formnovalidate 支持不稳定，建议统一用 type="submit" + CSS 伪装成图片按钮。

Android WebView（尤其旧版）可能忽略 formnovalidate，测试时务必真机验证
如果按钮是通过 button 元素实现的（<button type="submit"></button>），formnovalidate 同样有效，且语义更清晰
避免在 formnovalidate 按钮上同时设置 formaction 或 formmethod 后又忘记同步处理校验逻辑，容易漏掉边界情况