javascript - español - Google reCaptcha reset no funciona

recaptcha site key

Question

Quiero restablecer el widget Google reCaptcha cuando envío mi formulario a través de AJAX y tengo algunos errores de entrada o se envía un formulario. Estoy usando varios widgets en la misma página, así que los represento explícitamente.

Mi código 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>

Widget de carga

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

Después de enviar el formulario:

var id = $(''.g-recaptcha'', form).attr(''id'');
grecaptcha.reset(id);

El formulario es la instancia del formulario enviado.

Todo funciona bien cuando el formulario se llena correctamente. Pero reCaptcha no se reinicia ni se vuelve a cargar. Intenta con este grecaptcha.reset() pero no hay resultados.

¿Alguna idea?

Answer 1

Acaba de editar su código para crear un widget dinámico.

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

Y una vez que haya completado con éxito la tarea anterior, cambie el éxito de AJAX: respuesta

grecaptcha.reset(widgetId+id);

Aquí el id sería el mismo que se genera a continuación para Loop.

Answer 2

El método grecaptcha.reset() acepta un parámetro widget_id opcional y, de manera predeterminada, el primer widget creado, si no se especifica. Se widget_id un widget_id del método grecaptcha.render() para cada widget creado. Por lo tanto, debe almacenar este ID y usarlo para restablecer ese widget específico:

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

Ver aqui

Answer 3

Estás pasando la identificación incorrecta.

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

Su selector capturará los 20 widgets de reCaptcha, pero solo devolverá un solo ID de DOM (el primer reCaptcha). Así que tu código está realmente reiniciando la primera recaptcha.