谷歌reCaptcha重置不起作用

Question

我想要重置谷歌reCaptcha小部件时，我通过AJAX提交我的表单，并有一些输入错误或表单被发送。我在同一个页面上使用了多个小部件，所以我显式地呈现这些小部件。

我的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参数，如果未指定，则默认为创建的第一个小部件。对于创建的每个小部件，grecaptcha.render()方法都会返回一个widget_id。因此，您需要存储此id，并使用它来重置特定的小部件：

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

See here。

Answer 2

您正在传递错误的id。

$('.g-recaptcha', form).attr('id');

您的选择器将捕获所有20个reCaptcha小部件，但只返回单个DOM id (第一个reCaptcha)。所以你的代码实际上是在重置第一个recaptcha。

Answer 3

刚刚编辑了您的代码以创建一个动态窗口小部件。

<script>
    var reCaptchaCallback = function() {
        var elements = document.getElementsByClassName('g-recaptcha');
        for (var i = 0; i < elements.length; i++) {                
            widgetId+i = grecaptcha.render('recaptcha-'+i, {
                'sitekey' : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
            });
        }
    };
</script>

在成功完成上述任务之后，更改AJAX成功:响应

grecaptcha.reset(widgetId+id);

这里的id与从下面的for循环生成的id相同。