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

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

есть идеи?

21
ajax javascript recaptcha reload reset

3 ответов

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

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

посмотреть здесь.

38

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

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

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

0

просто отредактировал код, чтобы создать динамический виджет.

<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: response

grecaptcha.reset(widgetId+id);

здесь идентификатор будет таким же, который генерируется из приведенного ниже цикла for.

0