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()
но никаких результатов.
есть идеи?
3 ответов
на grecaptcha.reset()
метод принимает необязательный widget_id
параметр и по умолчанию первый виджет, созданный, если не указано. А widget_id
возвращает grecaptcha.render()
метод для каждого созданного виджета. Поэтому вам нужно сохранить этот идентификатор и использовать его для сброса этого конкретного виджета:
var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);
вы передаете неправильный идентификатор.
$('.g-recaptcha', form).attr('id');
ваш селектор захватит все 20 виджетов reCaptcha, но вернет только один идентификатор DOM (первый reCaptcha). Таким образом, ваш код фактически сбрасывает первую recaptcha.
просто отредактировал код, чтобы создать динамический виджет.
<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.