reCAPTCHA：灰色提交按钮，直到后端交互完成

Question

我已经集成了 reCAPTCHA，它工作正常，除非用户在选中 "I'm not a robot" 复选框后很快点击提交按钮。 reCAPTCHA 通过 Ajax 注册用户操作需要相当长的时间，如果他们点击提交的速度太快，g-recaptcha-response 会丢失，验证失败。

因此我的问题是：在 g-recaptcha-response 值可用之前，如何使提交按钮变灰？

    <form id="capform" action="/captchaverify" method="POST">
        <div class="g-recaptcha" data-sitekey="..."></div>
        <p>
        <input id="capsubmit" type="submit" value="Submit">
    </form>

Answer 1

这是一个示例，首先禁用提交按钮，然后在收到来自 reCaptcha 的回调后启用它。它还使用 jquery 验证来确保表单在提交之前有效。

var UserSubmitted = {
    $form: null,
    recaptcha: null,
    init: function () {   
        this.$form = $("#form").submit(this.onSubmit);
    },
    onSubmit: function (e) {
        if ($(this).valid()) {
            var response = grecaptcha.getResponse();
            if (!response) {
                e.preventDefault();
                alert("Please verify that you're a human!");
            }
        }
    },
    setupRecaptcha: function (key) {
        UserSubmitted.recaptcha = grecaptcha.render('recaptcha', {
            'sitekey': key,
            'callback': UserSubmitted.verifyCallback
            //'theme': 'light'//,
            //'type': 'image'
        });
    },
    verifyCallback: function (response) {
        if (response) {
            $(".visible-unverified").addClass("hidden");
            $(".hidden-unverified").removeClass("hidden");
        }
    }
};

我从页面调用 setupRecaptcha，其中的命名函数是 js 包含的一部分。

<script>
    var recaptchaLoader = function () {
        UserSubmitted.setupRecaptcha("yourkey");
    };
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaLoader&render=explicit" async defer></script>

你可以简化这个。我在具有不同密钥的多租户应用程序中使用它，而 UserSubmitted 实际上是一个更大的库的一部分。您也不能将命名空间 (UserSubmitted.somefunction) 用作 onload 参数（据我所知）。

Answer 2

我最终使用 data-callback 属性，如 documentation 中所述：

<form action="/captchaverify" method="POST">
    <div class="g-recaptcha" data-sitekey="..." data-callback="capenable" data-expired-callback="capdisable"></div>
    <p>
    <input id="capsubmit" type="submit" value="Submit">
</form>

JavaScript（基于mootools，但大意应该清楚）：

function capenable() {
    $('capsubmit').set('disabled', false);
}
function capdisable() {
    $('capsubmit').set('disabled', true);
}
window.addEvent('domready', function(){
    capdisable();
});