Google reCAPTCHA v3表单提交按钮需双击才能生效的技术问题

问题根源 #

你的代码同时绑定了按钮的click事件监听和reCAPTCHA的data-callback回调，逻辑冲突导致点击两次才生效：第一次点击时reCAPTCHA还未完成验证，grecaptcha.getResponse()返回空值，代码仅触发了验证流程但未提交表单；第二次点击时验证已完成，才会执行提交逻辑。

修改方案 #

将表单验证、提交逻辑全部整合到reCAPTCHA的回调函数中，去掉按钮自身的click监听，避免逻辑冲突。

修改后的HTML代码

<div class="form_wrpr">
   <f:form.hidden id="g-recaptcha-response" property="g-recaptcha-response" />
    <button class="g-recaptcha btn btn-blue" id="reg-submit"
     data-sitekey="{fields.clientKey}" data-callback='onSubmit' data-action='submit' type="button">
   {fields.Button}</button>
</div>

关键修改：将按钮type从submit改为button，避免默认表单提交行为干扰。

修改后的Script代码

// 定义reCAPTCHA的回调函数，验证完成后自动执行
function onSubmit(token) {
    let isvalid4 = true;

    // 第一步：表单字段验证
    if ($('#company').val() === '') {
        $('#company_error').text($('#company_error').data("error-mandatory"));
        isvalid4 = false;
    }

    // 验证不通过则终止流程，重置验证码
    if (!isvalid4) {
        grecaptcha.reset();
        return;
    }

    // 验证通过，禁用按钮防止重复提交
    $("#reg-submit").attr("disabled", true);

    // 第二步：提交表单到后端
    $.ajax({
        type: 'POST',
        url: $('#form-ajaxurl').val(),
        // 序列化表单数据并附加reCAPTCHA token
        data: $('#demo_form').serialize() + '&g-recaptcha-response=' + token,
        success: function(data) {
            $('#reg-submit').attr("disabled", false);
            const output = JSON.parse(data);
            
            if (output.error === 1 || output.error === 2) {
                $('#form-errors').html(output.result);
                grecaptcha.reset(); // 错误时重置验证码，允许重新提交
            } else {
                window.location.href = 'test.com' + output.result;
            }
        },
        error: function() {
            // 请求失败时恢复按钮状态并重置验证码
            $('#reg-submit').attr("disabled", false);
            grecaptcha.reset();
        }
    });
}

关键修改：

• 移除原按钮的click监听，所有逻辑依赖reCAPTCHA回调触发
• 验证失败或请求出错时调用grecaptcha.reset()，确保用户可以重新发起验证
• 提交时主动附加reCAPTCHA token，保证后端能接收到验证信息

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