Google 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);

Form是提交表单的实例。

正确填写表格后一切正常。但 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 小部件，但只有 return 一个 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 success: response

grecaptcha.reset(widgetId+id);

此处的 id 与从下面的 for 循环生成的相同。

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

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

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