Reimpostazione di Google ReCaptcha non funziona

Question

Desidero reimpostare il widget di Google reCaptcha quando invio il mio modulo tramite AJAX e ho alcuni errori di input o modulo inviato. Sto usando più widget sulla stessa pagina, quindi renderò questi widget esplicitamente.

Il mio codice 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 Caricamento in corso

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

Dopo presentare il modulo:

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

La forma è l'istanza del modulo inviato.

Tutto funziona correttamente quando la forma viene riempita correttamente. Ma reCaptcha non si resetta o ricarica. Prova questo grecaptcha.reset() ma nessun risultato.

Qualche idea?

Answer 1

Il metodo grecaptcha.reset() accetta un parametro opzionale widget_id e il valore predefinito è il primo widget creato se non specificato. A widget_id viene restituito dal metodo grecaptcha.render() per ciascun widget creato. Quindi è necessario memorizzare questo ID, e utilizzarlo per ripristinare quel widget specifici:

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

See here.

Answer 2

Si sta passando l'id errato.

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

vostro selettore catturerà tutti i 20 widget di reCAPTCHA, ma restituire solo un singolo ID DOM (il primo reCaptcha). Quindi il tuo codice sta effettivamente ripristinando il primo recaptcha.

Answer 3

È stato appena modificato il codice per creare un widget dinamico.

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

E dopo aver completato con successo il compito di cui sopra, il cambiamento nel successo AJAX: risposta

grecaptcha.reset(widgetId+id); 

Qui l'id sarebbe la stessa che viene generato dal sotto per Loop.