集成reCaptcha v3后表单需点击两次提交的问题求助

问题根源在于你用jQuery的unbind('submit').submit()提交表单时，调用.submit()会再次触发绑定的submit事件处理程序，等于又执行了一遍event.preventDefault()，导致第一次点击的提交被阻止；第二次点击时事件已解绑，才真正完成提交。

改用原生DOM的submit方法即可解决，它不会触发jQuery绑定的事件处理逻辑，修改后的代码如下：

$('#contactForm').submit(function(event){ 
  event.preventDefault();
                
  grecaptcha.ready(function() {
    grecaptcha.execute('[My_Site_Key]', {action: 'contactForm'}).then(function(token) {
        // 移除已存在的token输入，避免重复添加导致服务器验证异常
        $('#contactForm input[name="g-recaptcha-response"]').remove();
        // 添加新的reCaptcha token隐藏域
        $('#contactForm').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
        console.log(token);
        // 调用原生DOM提交方法，绕过jQuery的事件绑定
        document.getElementById('contactForm').submit();
    });
  });
});

核心要点： #

• 每次提交前清理旧的token输入，防止多次操作生成同名字段干扰服务器验证
• 原生submit()方法直接触发表单提交行为，不会触发jQuery绑定的submit事件，因此不会再执行event.preventDefault()，一次点击就能完成完整流程

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