在标签上添加novalidate属性即可彻底禁用HTML5原生验证，它会阻止required、type="email"、pattern等所有内置校验及提示；该布尔属性不支持写在input上，且仅作用于当前表单。
怎么用 novalidate 彻底禁用整个表单的 HTML5 原生验证
只要在 <form></form> 标签上加 novalidate 属性，浏览器就不会触发 required、type="email"、pattern 等任何内置校验逻辑，连提交时的弹窗提示和焦点阻止都消失。
注意：novalidate 是布尔属性，写成 novalidate="novalidate" 也行，但只写 novalidate 更规范；它只作用于当前表单，不影响页面其他 <form></form>。
常见误操作：
- 只给某个
<input>加novalidate—— 无效，该属性不支持写在 input 上 - 用 JavaScript 调用
form.checkValidity()后手动 submit —— 若表单本身没加novalidate，submit 仍会触发验证 - 以为加了
onsubmit="return false"就够了 —— 它能阻止提交，但用户点击输入框后仍可能看到红色边框或 :invalid 伪类样式
想保留部分验证，只关掉特定字段？用 formnovalidate 按钮级控制
formnovalidate 是给 <button type="submit"></button> 或 <input type="submit"> 用的，表示“点这个按钮提交时跳过验证”，不影响其他提交按钮。
立即学习“前端免费学习笔记（深入）”；
典型场景：一个表单配两个按钮，“暂存草稿”不校验，“正式提交”要校验。
示例：
<form> <input name="email" type="email" required> <button type="submit">正式提交（校验）</button> <button type="submit" formnovalidate>保存草稿（不校验）</button> </form>
关键点：
-
formnovalidate和novalidate互不干扰，可以共存 - 如果表单已设
novalidate，那formnovalidate按钮就失去意义 - 某些旧版 Safari 对
formnovalidate支持不稳定，建议搭配 JS 判断event.submitter?.hasAttribute('formnovalidate')做兜底
禁用验证后，:valid/:invalid 伪类还生效吗？
禁用验证（novalidate）后，浏览器不会根据约束规则动态更新元素的 :valid / :invalid 状态，但初始渲染时仍可能按当前值计算一次 —— 这容易造成样式残留。
比如一个空的 required 输入框，在 novalidate 表单里仍可能被标记为 :invalid，直到用户手动输入再删除才变回 :valid。
稳妥做法是显式重置：
form[novalidate] input:invalid {
box-shadow: none;
border-color: #ccc;
}
或者更彻底：用 JS 移除所有 input 的 required、pattern 等属性，从源头消除状态计算依据。
主流 CMS/建站模板里哪些默认开了验证？怎么快速定位
WordPress 主题常用 Contact Form 7、WPForms，它们默认输出带 required 的字段，但表单标签一般不带 novalidate —— 所以原生验证实际是开启的，只是常被 JS 插件覆盖而没被注意到。
Shopify 主题中，结账页的 <form id="customer_login"></form> 通常有 novalidate，但注册页的 <form class="contact-form"></form> 很多模板漏加。
排查方法很直接：
- 打开 DevTools → Elements 面板，搜索
<form>，看有没有 <code>novalidate - 检查任意必填
<input>是否含required、type="email"、minlength等属性 - 在控制台执行
document.querySelector('form').checkValidity()，返回false说明验证逻辑仍在运行
真正麻烦的不是加 novalidate，而是有些模板把验证逻辑拆到多个 JS 文件里，禁用 HTML5 验证后，JS 层校验没同步关掉，反而导致双重复校验或冲突。这种得顺藤摸瓜找 addEventListener('submit', ...) 的绑定位置。
