Как перезагрузить виджет google recaptcha после того, как пользователь отправит недопустимые входы

У меня есть форма регистрации с новым виджетами google recaptcha. Когда пользователь отправляет информацию, мы проверяем проверку с помощью javascript и возвращаем проблемы на страницу (например: "пожалуйста, используйте действительный номер телефона" ). однако, поскольку страница не перезагружается, когда пользователь вводит правильную информацию и отправляется снова (без повторной попытки повторной записи)... recaptcha больше не действителен и они не могут отправить без перезагрузки страницы.

есть ли хорошее решение? могу ли я как-то перезагрузить виджет? Я попробовал grecaptcha.render, но на самом деле ничего не сделал.

EDIT:

Когда я пытаюсь снова отобразить виджет, он говорит: "Элемент-заполнитель должен быть пустым"

Я попытался опорожнить элемент, который, казалось, работал ($ ('. g-recaptcha'). empty();), а затем рендеринг, но он по-прежнему выдавал ту же ошибку.

Ответы

Ответ 1

Метод, который вы ищете, это grecaptcha.reset()

Однако для того, чтобы эта функция работала, вы должны явно сделать reCaptacha следующим образом: <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Ответ 2

Я смог сделать это, используя:

grecaptcha.reset();

Ответ 3

Если вы используете grecaptcha.render с jQuery, убедитесь, что вы фактический параметр DOM, а не элемент jQuery:

Эта будет работать:

grecaptcha.render( $('.g-recaptcha')[0], { sitekey : 'your_key_here' });

но этот wont:

grecaptcha.render( $('.g-recaptcha'), { sitekey : 'your_key_here' });

Ответ 4

Ваше событие recaptcha render js должно вызываться только один раз в script, ваш код recaptcha недействителен, если событие grecaptcha.render js, вызываемое вторым раз в script. Вам нужно будет проверить свой код, чтобы он не вызывал функцию grecaptcha.render второй раз при проверке проверки.

ИЛИ

В консоли появится сообщение об ошибке Uncaught ReferenceError: Recaptcha is not defined, которое указывает на проблему с reCAPTCHA script. Это вызвано плохим URL-адресом на странице - http://api.recaptcha.net/js/recaptcha_ajax.js. Google обновил reCAPTCHA и переместил местоположение script в http://www.google.com/recaptcha/api/js/recaptcha_ajax.js.

также проверьте это сообщение

http://www.instructables.com/id/Fix-reCAPTCHA-errors-on-Instructables/

и этот пост

Uncaught ReferenceError: Recaptcha не определен

Ответ 5

Personnaly я reset содержимое элемента html элемента с

$('#captcha').html('');

после этого перезагрузите recaptcha с помощью

$.getScript("https://www.google.com/recaptcha/api.js");

которые загружают recaptcha-контент на ваш

<div id="captcha" class="g-recaptcha" data-sitekey="yourSitePublicKey"></div>

Ответ 6

Вот некоторый код для сопровождения ответа @tzafar:

var myCaptcha = null;
function prepCaptcha() {
    if (myCaptcha === null)
        myCaptcha = grecaptcha.render(document.getElementById('my-captcha'), {
            'sitekey': myCaptchaKey,
            'theme': 'light'
        });
    else
        grecaptcha.reset(myCaptcha);
}

В моем случае my-captcha является идентификатором div внутри модальности Bootstrap. Я запускаю prepCaptcha() в обработчике событий для модального события shown.bs.modal. В первый раз он инициализирует captcha. На последующих отображениях модальности он сбрасывает его.

Также обратите внимание, что вы можете быстро проверить, что вы получаете новую капчу, напечатав завершенное значение captcha:

console.log(grecaptcha.getResponse(myCaptcha));

Вы не должны видеть одно и то же значение дважды.

Ответ 8

Если вы используете новый recaptcha 2.0, используйте это: для кода позади:

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

для простого javascript

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>

Ответ 9

У меня была такая же проблема с excelwebzone/recaptcha-bundle для Symfony2. В основном говорится, что recaptcha был загружен в прошлом в ваш DOM, а заполнитель, который должен быть пустым, был полным.

В этих пакетах нет настроек для явных обратных вызовов, поэтому вы должны убедиться, что заполнитель или даже целая форма пуста, прежде чем загружать recaptcha.

И мой был застрял в DOM, потому что я загружал его AJAX. Во втором звонке он был там.

Вы можете просто использовать $('#your-div-with-form').html('')

Ответ 10

<script>
function cform(token) {
$.ajax({
type: 'POST',
url: 'contact_chk.php',
data: $('#cform').serialize(), 
success: function(response) {
grecaptcha.reset();
$("#con_msg").html(response);
document.getElementById("name").value='';
document.getElementById("subject").value='';
document.getElementById("email").value='';
document.getElementById("phone").value='';
document.getElementById("message").value='';
},
error: function(response) {
grecaptcha.reset();
$("#con_msg").html('Try Again...');
}
});
}
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>