javascript - 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 .