Google reCaptcha reset не работает

Я хочу reset виджет Google 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 не выполняет reset или перезагружает. Он пробует это grecaptcha.reset(), но никаких результатов.

Любая идея?

Ответ 1

Метод grecaptcha.reset() принимает необязательный параметр widget_id и по умолчанию используется первый виджет, созданный, если не указан. A widget_id возвращается из метода grecaptcha.render() для каждого созданного виджета. Поэтому вам нужно сохранить этот идентификатор и использовать его для reset этого конкретного виджета:

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

См. здесь.

Ответ 2

Вы передаете неправильный идентификатор.

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

Ваш селектор захватит все 20 виджета reCaptcha, но вернет только один DOM-идентификатор (первый reCaptcha). Таким образом, ваш код фактически перезагружает первый recaptcha.

Ответ 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.