event.preventDefault()未生效 表单校验不通过仍提交问题

核心拦截失效常见原因 #

• preventDefault 执行时序/位置错误
  1. 如果event.preventDefault()写在异步逻辑（setTimeout、接口请求、未加await的Promise回调）里，等它执行的时候浏览器已经触发默认提交了，拦截完全无效。
  2. 如果makeRed()、divFill()方法在preventDefault()之前调用，且内部抛出未捕获的JS报错，会直接中断回调执行，后面的拦截代码根本跑不到，打开控制台筛选Error级别日志，提交时看有没有红色报错即可确认。
  3. 不要依赖控制台普通日志判断拦截分支是否执行，在preventDefault()同一行加专属标记日志，确认校验不通过时这行代码真的运行了——很多人是把判断条件写反（比如把if(存在校验错误)写成if(不存在校验错误)），导致拦截逻辑根本没进。
• 存在绕过事件拦截的提交逻辑
  1. 全局搜索代码里所有调用.submit()的位置，注意：通过JS手动调用DOM原生form.submit()方法触发的提交，不会触发form的submit事件，也无法被preventDefault拦截，如果其他逻辑里提前手动调了提交方法，你写的监听回调完全不会生效。
  2. 检查提交按钮有没有单独加formaction="nyhandler.kontakt.php"属性，部分浏览器下按钮配置的formaction会绕过form上的事件监听直接提交。
  3. 检查form标签上有没有写内联的onsubmit属性（比如onsubmit="return true"），内联属性优先级高于你通过addEventListener绑定的监听，会直接覆盖拦截逻辑。
• 事件绑定目标错误
  不要把提交拦截逻辑绑在提交按钮的click事件上，按钮click触发的表单默认提交不会被按钮上的拦截逻辑完全阻断，必须把submit事件直接绑定在<form>DOM元素本身。
  另外如果给同一个form绑定了多个submit监听，要确认没有其他监听里提前触发了提交逻辑。

快速定位方法 #

1. 先清空submit事件回调里的所有业务逻辑，只保留event.preventDefault()一行代码，点击提交如果还跳转，说明是事件绑定错误/存在手动调用submit的逻辑；如果不跳转，说明是你原有回调里的逻辑报错、时序不对或者判断条件写错，逐步往回加代码就能定位到具体问题点。
2. 校验不通过的分支里，在调用preventDefault()之后补一行return false做兜底，兼容部分老旧浏览器的拦截逻辑。

内容的提问来源于stack exchange，提问作者DOFFIZ