jQuery绑定reCAPTCHA v3的表单提交函数仅第二次点击生效问题咨询

问题核心原因 #

• 原代码没有验证状态标识，第一次提交被拦截后异步生成token，调用jQuery的unbind().submit()在部分版本中不会立刻触发原生提交逻辑，需要第二次点击才会走无绑定的提交流程
• 每次提交都会重复插入验证参数隐藏域，会导致表单参数冗余

修复后代码 #

<script>
$(document).ready(function() {
    // 验证状态标识位
    let captchaVerified = false;
    $("#wyz_registration_form").submit(function(event) {
        // 验证完成直接放行提交
        if (captchaVerified) {
            return true;
        }
        // 首次提交拦截，走人机验证逻辑
        event.preventDefault();
        var email = $('#wyz_user_email').val();
        var user = $('#wyz_user_register').val();

        grecaptcha.ready(function() {
            grecaptcha.execute('MYKEY', {action: 'testine_forma'}).then(function(token) {
                // 清空历史验证参数，避免重复插入
                $('input[name="token"], input[name="action"]').remove();
                // 插入新的验证参数
                $('#wyz_registration_form').prepend('<input type="hidden" name="token" value="' + token + '">');
                $('#wyz_registration_form').prepend('<input type="hidden" name="action" value="testine_forma">');
                // 标记验证完成
                captchaVerified = true;
                // 调用原生DOM提交方法，绕过jQuery事件绑定直接提交
                $('#wyz_registration_form')[0].submit();
            });
        });
    });
});
</script>

关键修改说明 #

• 新增状态标识位避免重复走验证逻辑，不需要解绑事件也能正常放行提交
• 调用原生DOM的submit()方法，确保验证完成后立刻触发表单提交，不需要二次点击
• 新增旧验证参数清理逻辑，避免多次操作产生冗余参数

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