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

【问题标题】：reCAPTCHA : Grey out Submit button until backend interaction is finishedreCAPTCHA ：灰色提交按钮，直到后端交互完成
【发布时间】：2016-02-01 12:02:51
【问题描述】：

我已经集成了 reCAPTCHA，它工作正常，除了当用户在选中“我不是机器人”复选框后太快点击提交按钮时。 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>

【问题讨论】：

ReCaptcha 2.0: enable Submit button on callback if recaptcha successful的可能重复

标签： recaptcha

【解决方案1】：

我最终使用了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();
});

【讨论】：

【解决方案2】：

这是一个示例，该示例从禁用提交按钮开始，并在收到来自 reCaptcha 的回调后启用它。它还使用 jquery validate 来确保表单在提交之前是有效的。

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 参数（据我所知）。

【讨论】：