web-dev-qa-db-fra.com

La réinitialisation de Google reCaptcha ne fonctionne pas

Je veux réinitialiser le widget Google reCaptcha lorsque je soumets mon formulaire via AJAX et que des erreurs de saisie ou un formulaire est envoyé. J'utilise plusieurs widgets sur la même page, donc je les rend explicitement.

Mon code 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 chargement

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

Après avoir soumis le formulaire:

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

Le formulaire est l'instance du formulaire soumis.

Tout fonctionne bien lorsque le formulaire est correctement rempli. Mais reCaptcha ne réinitialise ni ne recharge. Il essaie cette grecaptcha.reset() mais aucun résultat.

Une idée?

javascriptajaxreloadresetrecaptcha
25
quarky

La méthode grecaptcha.reset() accepte un paramètre facultatif widget_id Et utilise par défaut le premier widget créé s'il n'est pas spécifié. Un widget_id Est renvoyé par la méthode grecaptcha.render() pour chaque widget créé. Vous devez donc stocker cet identifiant et l'utiliser pour réinitialiser ce widget spécifique:

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

Voir ici .

40
levi

Vous passez un mauvais identifiant.

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

Votre sélecteur capturera les 20 widgets reCaptcha, mais ne renverra qu'un seul identifiant DOM (le premier reCaptcha). Votre code réinitialise donc le premier recaptcha.

0
Jason

Vous venez de modifier votre code pour créer un widget dynamique.

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

Et après avoir terminé avec succès la tâche ci-dessus, modifiez la réponse AJAX success: response

grecaptcha.reset(widgetId+id);

Ici, l'identifiant serait le même que celui généré ci-dessous pour la boucle.

0
Viral Patel