Google ReCaptcha Reset funktioniert nicht

Question

Ich möchte Google ReCaptcha Widget zurücksetzen, wenn ich mein Formular über AJAX absende und einige Eingabefehler oder Formular gesendet wird. Ich verwende mehrere Widgets auf derselben Seite, damit ich diese Widgets explizit rendere.

Mein HTML-Code:

<div class="g-recaptcha" id="recaptcha-1"></div> 
<div class="g-recaptcha" id="recaptcha-2"></div> 
... 
<div class="g-recaptcha" id="recaptcha-20"></div> 

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

Nach einreichen Form:

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

Form ist die Instanz der vorgelegten Form.

Alles funktioniert gut, wenn Formular korrekt ausgefüllt wird. Aber reCaptcha wird nicht zurückgesetzt oder neu geladen. Versuchen Sie dies grecaptcha.reset(), aber keine Ergebnisse.

Irgendeine Idee?

Answer 1

Die Methode grecaptcha.reset() akzeptiert einen optionalen Parameter widget_id und standardmäßig das erste Widget, das erstellt wird, wenn nicht angegeben. Für jedes erstellte Widget wird widget_id aus der Methode grecaptcha.render() zurückgegeben. So müssen Sie diese ID speichern, und verwenden Sie es, dass bestimmte Widget zurück:

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

See here.

Answer 2

Sie übergeben die falsche ID.

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

Ihre Wähler werden all 20 reCaptcha Widget erfassen, sondern nur einen einzigen DOM id zurückkehren (die erste reCaptcha). Ihr Code setzt also tatsächlich das erste Recaptcha zurück.

Answer 3

Sie haben Ihren Code bearbeitet, um ein dynamisches Widget zu erstellen.

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

Und nachdem Sie haben erfolgreich die obige Aufgabe, Änderung des AJAX Erfolg abgeschlossen: Antwort

grecaptcha.reset(widgetId+id); 

hier die ID wäre das gleiche, das von der unten Schleife erzeugt wird.