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()。因此，您需要存储此ID，并使用它来重置该特定小部件：

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

See here

Answer 2

您传递的是错误的ID。

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

你的选择器将捕获所有20个reCaptcha小部件，但只返回一个DOM id（第一个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与下面为Loop生成的id相同。

Answer 4

我在同一页面中有两个Google验证码，两种格式不同

<form id="form1">    
<input type="text" name="form1-input">
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div>
</form>

和

<form id="form2">    
<input type="text" name="form2-input">
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div>
</form>

您可以通过

重设首个验证码

 grecaptcha.reset(); or grecaptcha.reset(0);

和第二个验证码按索引（1）

grecaptcha.reset(1);

Answer 5

我遇到了一个问题，页面上有多个 recaptcha，有些被隐藏了。在这种情况下，我不得不遍历所有这些并像这样重置它们：

                var count = 0;
                $(".g-recaptcha").each(function () {
                    grecaptcha.reset(count);
                    count++;
                });

谷歌reCaptcha重置不起作用

5 个答案: