formnovalidate属性可使type="submit"按钮点击时跳过required、email等原生校验,但须确保按钮在表单内或通过form属性关联,且不可与preventDefault()或form.submit()混用。

直接给提交按钮加 formnovalidate 属性,就能让点击它时跳过所有原生校验(如 required、email 格式、pattern 等),但前提是按钮必须是 type="submit",且处于表单作用域内。
实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。
按钮必须是 type="submit"
只有触发表单提交的按钮才支持该属性:
✅ 正确写法:
✅ 也可用 input:
❌ 错误写法: —— type="button" 不提交表单,formnovalidate 完全被忽略
❌ 缺少 type 也不行: 默认是 type="button",同样无效
按钮得在表单内部或显式关联
formnovalidate 需要明确知道它属于哪个表单:
✅ 在 标签内直接写按钮,自然生效
✅ 按钮在表单外,必须用 form="myForm" 关联:
❌ 按钮不在 form 内,又没写 form 属性,formnovalidate 就失去上下文,不生效
别和 preventDefault() 或 JS 提交混用
这些操作会绕过 formnovalidate 的设计路径:
❌ 在 onclick 里写 event.preventDefault() —— 表单根本没提交,属性没机会起作用
❌ 用 form.submit() 模拟点击 —— 它完全无视 formnovalidate,且不触发 submit 事件
✅ 正确的 JS 替代方案是 form.requestSubmit(),它尊重 formnovalidate 属性
✅ 监听 submit 事件时,可用 event.submitter?.hasAttribute('formnovalidate') 判断用户点的是哪个按钮
它只跳过原生校验,不影响其他逻辑
formnovalidate 是浏览器 constraint validation API 的开关,不是万能绕过器:
✔️ 不弹红框、不聚焦错误字段、不阻断提交
✔️ submit 事件照常触发,后端仍会收到数据
✔️ JavaScript 的 checkValidity()、validity 对象、:invalid 伪类仍反映真实状态 —— CSS 可能意外激活,需注意样式兜底
✘ 不影响你写的 JS 校验逻辑
✘ 不替代服务端校验,空值或非法数据仍可能进库










