谷歌reCaptcha重置不起作用

Question

我想通过AJAX提交表单时重置Google reCaptcha小部件,并发送一些输入错误或表单.我在同一页面上使用多个小部件,因此我明确地呈现这些小部件.

我的HTML代码:

<div class="g-recaptcha" id="recaptcha-1"></div>
<div class="g-recaptcha" id="recaptcha-2"></div>
...
<div class="g-recaptcha" id="recaptcha-20"></div>

加载小部件

<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit&hl=en" async defer></script>
<script>
    var reCaptchaCallback = function() {
        var elements = document.getElementsByClassName('g-recaptcha');
        for (var i = 0; i < elements.length; i++) {
            var id = elements[i].getAttribute('id');
            grecaptcha.render(id, {
                'sitekey' : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
            });
        }
    };
</script>

提交表格后:

var id = $('.g-recaptcha', form).attr('id');
grecaptcha.reset(id);

表单是提交表单的实例.

当表格填写正确时,一切正常.但reCaptcha不会重置或重新加载.尝试这个grecaptcha.reset()但没有结果.

任何的想法？

Answer 1

该grecaptcha.reset()方法接受可选widget_id参数,默认为未指定时创建的第一个窗口小部件.widget_id从grecaptcha.render()创建的每个窗口小部件的方法返回A. 因此,您需要存储此ID,并使用它来重置该特定小部件:

var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);

看到这里.