Question

我已经集成了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>

Answer 1

我最终使用documentation中描述的data-callback属性：

<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();
});

Answer 2

这是一个以禁用提交按钮开始的示例，并在从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参数（据我所知）。

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

2 个答案: