Resetowanie Google reCaptcha nie działa

Question

Chcę zresetować widżet Google reCaptcha po przesłaniu formularza za pośrednictwem AJAX i wystąpieniu błędów lub formularzu wejściowym. Używam wielu widżetów na tej samej stronie, więc wyraźnie renderuję te widżety.

Mój kod 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> 

Ładowanie widget

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

Po Złożenie:

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

Forma jest wystąpienie złożonego formularza.

Wszystko działa prawidłowo, gdy formularz jest prawidłowo wypełniony. Ale reCaptcha nie resetuje ani nie ładuje ponownie. Wypróbować to grecaptcha.reset(), ale bez wyników.

Każdy pomysł?

Answer 1

Metoda grecaptcha.reset() akceptuje opcjonalny parametr widget_id i domyślnie jest ustawiony na pierwszy widżet utworzony, jeśli nie jest określony. A widget_id jest zwracana z metody grecaptcha.render() dla każdego utworzonego widgetu. Więc trzeba przechowywać identyfikator i używać go zresetować tego konkretnego widżet:

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

See here.

Answer 2

Przekazujesz nieprawidłowy identyfikator.

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

Twój selektor będzie przechwytywać wszystkie 20 Odśwież widżet, ale zwrócić tylko jeden identyfikator DOM (pierwszy Odśwież). Twój kod resetuje pierwszą recaptcha.

Answer 3

Wystarczy edytować kod, aby utworzyć dynamiczny widget.

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

I po pomyślnym wykonaniu powyższego zadania, zmiany w sukcesie AJAX: odpowiedź

grecaptcha.reset(widgetId+id); 

Tutaj id byłby ten sam, który jest generowany z poniżej pętli for.