WordPress Contact Form7邮箱验证：设置return false仍提交表单求助

你的代码核心问题在于监听了全局document的submit事件，而非目标表单本身的submit事件，加上Contact Form7有自己的表单提交逻辑，导致阻止提交的操作没有生效。另外return false之后的window.history.back()属于无效代码，永远不会执行。

修正后的代码： #

<script>
document.addEventListener("DOMContentLoaded", function () {
    // 精准定位Contact Form7的表单，避免影响页面其他表单
    const form = document.querySelector("form.wpcf7-form");
    const email = document.querySelector("input[name='email-380']");
    const confirmEmail = document.querySelector("input[name='email-381']");
    const emailError = document.getElementById("email_error");

    // 先判断表单是否存在，避免DOM元素未找到报错
    if (!form || !email || !confirmEmail || !emailError) return;

    // 监听表单自身的submit事件，而非全局document事件
    form.addEventListener("submit", function (e) {
        if (email.value.trim() !== confirmEmail.value.trim()) {
            // 优先调用preventDefault阻止默认提交行为
            e.preventDefault();
            emailError.style.display = "block";
            confirmEmail.focus();
            return;
        } else {
            emailError.style.display = "none";
        }
    });
});
</script>

关键修改说明： #

• 监听表单自身的submit事件：直接绑定到目标CF7表单（通过form.wpcf7-form选择器，确保只针对CF7表单），避免全局事件被其他逻辑干扰。
• 增加DOM元素存在性判断：防止页面加载时元素未渲染完成，导致脚本报错中断。
• 移除无效代码：删掉return false之后的window.history.back()，这行代码永远不会被执行。
• 优先使用e.preventDefault()：相比return false，e.preventDefault()更直接地阻止表单的默认提交行为，避免事件冒泡带来的问题。

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