使用 justvalidate 进行前端表单验证时,若脚本加载方式不当(如误用 `defer`),会导致验证实例化失败,进而使 `onsuccess` 回调无法触发真实表单提交,造成“验证通过却无后端接收”的假象。
在基于 PHP + MySQL 的注册流程中,前端 JavaScript 验证与后端数据处理需严格协同。你遇到的问题——控制台显示 “Form is valid. Submitting…”,但 MySQL 表中无新增记录——根本原因并非验证逻辑错误,而是 JustValidate 库未正确初始化,导致 onSuccess 回调中的 form.submit() 实际未执行。
? 根本原因:defer 属性破坏脚本执行时序
JustValidate 是一个依赖 DOM 就绪和全局 window 对象的库。当你为引入库的 <script> 标签添加 defer 属性时:</script>
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js" defer></script>
浏览器会延迟执行该脚本,直到 HTML 解析完成且 DOM 构建完毕。但问题在于:你的自定义验证脚本(/js/validation.js)同样带有 defer,且它在 JustValidate 库加载完成前就尝试访问 window.JustValidate —— 此时构造函数尚未挂载,引发静默失败(控制台可能因未捕获异常而无报错,或仅显示 TypeError: window.JustValidate is not a constructor)。
结果是:validation 实例创建失败 → .onSuccess() 注册无效 → 表单点击提交后,event.preventDefault()(JustValidate 默认行为)阻止了原生提交,而手动 submit() 又未执行 → 表单零提交,后端 PHP 完全收不到请求。
立即学习“Java免费学习笔记(深入)”;
✅ 正确做法:确保库优先加载,移除 defer 干扰
1. 移除 JustValidate 主库的 defer
将库引入改为同步加载(推荐置于