javascript - site - Cómo volver a cargar el widget recaptcha de Google después de que el usuario envíe entradas no válidas

recaptcha v2 example

Question

Tengo un formulario de registro con el nuevo widget google recaptcha en él. Cuando un usuario envía información, verificamos la validación con javascript y devolvemos los problemas a la página (por ejemplo, "use un número de teléfono válido"). sin embargo, dado que la página no se vuelve a cargar, cuando el usuario ingresa la información correcta y va a enviar nuevamente (sin tener que hacer la recaptcha nuevamente) ... la recaptcha ya no es válida y no pueden enviarla sin volver a cargar la página.

¿Hay una buena solución para esto? ¿Puedo recargar el widget de alguna manera? Intenté con grecaptcha.render pero realmente no hizo nada.

EDITAR:

Cuando intento reproducir el widget de nuevo, dice "el elemento de marcador de posición debe estar vacío"

Intenté vaciar el elemento que parecía funcionar ($ (''.g-recaptcha''). Empty ();) y luego renderizar, pero aún así se produjo el mismo error.

Answer 1

Aquí hay un código para acompañar la respuesta de @ tzafar:

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

En mi caso, my-captcha es el id de un div dentro de un modo Bootstrap. prepCaptcha() en el controlador de eventos para el evento shown.bs.modal . La primera vez, se inicializa el captcha. En demostraciones posteriores del modal, lo reinicia.

Además, tenga en cuenta que puede verificar rápidamente que está obteniendo un nuevo captcha imprimiendo el valor del captcha completado:

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

No deberías ver el mismo valor dos veces.

Answer 2

Intente llamar a la función reload() dentro de ReCaptcha (versión 1):

Recaptcha.reload();

¿Cómo recargar ReCaptcha usando JavaScript?

Answer 3

Personalmente reinicio el contenido de mi elemento html con

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

después de eso recargué recaptcha usando

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

que cargan contenido recaptcha en tu

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

Answer 4

Pude hacerlo simplemente usando:

grecaptcha.reset();

Answer 5

Si está utilizando grecaptcha.render con jQuery, asegúrese de que está configurando realmente el elemento DOM, en lugar del elemento jQuery:

Esto funcionará:

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

pero esto no lo hará :

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

Answer 6

Si estás usando WordPress, asegúrate de no tener otro complemento reCaptcha instalado ... ese fue el problema para mí.

Answer 7

Tuve el mismo problema con excelwebzone/recaptcha-bundle para Symfony2. Básicamente se dice que recaptcha se cargó en el pasado a su DOM y el marcador de posición que debería estar vacío estaba lleno .

Esos paquetes no tienen configuraciones para devoluciones de llamada explícitas, por lo que debe asegurarse de que el marcador de posición o incluso el formulario completo esté vacío antes de cargar recaptcha .

Y el mío se quedó atascado en DOM porque lo estaba cargando con AJAX. En segunda llamada estaba allí.

Simplemente puede usar $(''#your-div-with-form'').html('''')

Answer 8

si está usando el nuevo recaptcha 2.0 use esto: para el código detrás:

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

para javascript simple

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

Answer 9

su evento recaptcha render js debe llamarse solo una vez en el script, su código recaptcha no es válido si el evento grecaptcha.render js se llama segunda vez en el script. Debe verificar su código para que no llame a la función grecaptcha.render segunda vez en la verificación de validación.

O

En la consola, verá un error de Uncaught ReferenceError: Recaptcha is not defined un mensaje de error Uncaught ReferenceError: Recaptcha is not defined , que indica el problema con el script reCAPTCHA. Esto se debe a una url incorrecta en la página: http://api.recaptcha.net/js/recaptcha_ajax.js . Google ha actualizado reCAPTCHA y movió la ubicación del script a http://www.google.com/recaptcha/api/js/recaptcha_ajax.js .

tambien revisa este post

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

y este post

Error de referencia no capturado: Recaptcha no está definido

Answer 10

El método que está buscando es grecaptcha.reset()

Sin embargo, para que esta función funcione, debe procesar la reCaptacha explícitamente de esta manera: <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Answer 11

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