表单提交时reCAPTCHA验证脚本未触发，无法拦截未验证提交

我用PHP+JavaScript写了联系表单，想要实现「未完成reCAPTCHA验证则禁止表单提交」的功能，但绑定在表单submit事件上的JS脚本完全没反应，alert和console.log都没有输出，表单会直接提交。

原因分析 #

1. 事件绑定冲突：页面引入的custom.js或footer-script.php中，可能已经用jQuery给表单绑定了submit事件，并且提前阻止了默认行为或覆盖了事件监听，导致你的原生JS事件无法触发。
2. DOM加载时机问题：虽然脚本在页面底部，但如果其他脚本先完成了表单事件绑定并修改了默认提交逻辑，后续绑定的事件会被干扰。
3. reCAPTCHA加载异步性：reCAPTCHA脚本用了async defer，但如果你的验证脚本在reCAPTCHA未初始化完成前就尝试调用grecaptcha，也可能导致逻辑失效，但当前核心问题是事件根本没触发，所以优先级低于冲突问题。

解决方案 #

方案1：改用jQuery绑定事件（适配现有环境） #

页面已经引入jQuery，直接用jQuery绑定submit事件，避免和现有脚本冲突：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
$(document).ready(function() {
    $('#contact-form').on('submit', function(event) {
        var response = grecaptcha.getResponse();
        if (response.length === 0) {
            event.preventDefault(); // 阻止表单提交
            $('#recaptcha-error').html('请完成reCAPTCHA验证').css('color', '#dc3545');
        } else {
            $('#recaptcha-error').html(''); // 验证通过后清空错误提示
        }
    });
});
</script>

方案2：整合到现有事件逻辑中 #

打开custom.js和footer-script.php，查找是否有类似以下的表单提交处理代码：

$('#contact-form').submit(function(e) {
    // 原有表单处理逻辑
});

如果存在，直接把reCAPTCHA验证逻辑添加到这个函数里，不要单独绑定新事件：

$('#contact-form').submit(function(e) {
    var response = grecaptcha.getResponse();
    if (response.length === 0) {
        e.preventDefault();
        $('#recaptcha-error').html('请完成reCAPTCHA验证').css('color', '#dc3545');
        return false;
    }
    // 原有表单处理逻辑...
});

方案3：原生JS事件捕获模式 #

如果坚持用原生JS，使用事件捕获模式确保你的监听优先触发：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('contact-form').addEventListener('submit', function(event) {
        var response = grecaptcha.getResponse();
        if (response.length === 0) {
            event.preventDefault();
            const errorEl = document.getElementById('recaptcha-error');
            errorEl.textContent = '请完成reCAPTCHA验证';
            errorEl.style.color = '#dc3545';
        } else {
            document.getElementById('recaptcha-error').textContent = '';
        }
    }, true); // true表示事件捕获模式，优先触发
});
</script>

额外优化 #

给错误提示元素添加默认样式，提升用户体验：

#recaptcha-error {
    color: #dc3545;
    margin-top: 8px;
    font-size: 0.9rem;
}

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