web-dev-qa-db-fra.com

Erreur non capturée: l'élément d'espace réservé ReCAPTCHA doit être un élément ou un identifiant

J'ajoute ReCAPTCHA à un site Web (Bootstrap Jekyll) comportant plusieurs formulaires de contact. Il y a un modal contextuel dans le pied de page, une section occasionnelle "contactez-nous maintenant", ainsi qu'une "demande plus d'informations sur ____" sur plusieurs pages. 

Comme j'ai plusieurs formulaires de contact sur une même page, je devais rendre explicitement chaque ReCAPTCHA. Voici le code pour cela: 

Dans mon javascript: 

var CaptchaCallback = function() {
    grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
    });

    grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
    });
};

En pied de page (inclus sur toutes les pages)

<div id="RecaptchaField1"></div>

(et au bas du pied de page)

<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>

Cela fonctionne bien sur une page qui a deux formulaires de contact distincts (c’est-à-dire que j’ai une autre div sur la page avec l’id de RecaptchaField2), mais si je tombe sur une page qui n’a qu’un seul formulaire de contact, la console renvoie une erreur Erreur non capturée: L'élément fictif ReCAPTCHA doit être un élément ou un identifiant. 

Le ReCAPTCHA semble fonctionner de toute façon, mais quelqu'un peut-il m'aider à comprendre la cause de cette erreur? Toutes les recherches que j'ai effectuées indiquent qu'il s'agit d'importer la bibliothèque deux fois, mais je suppose que ce n'est pas le cas, car le problème ne se pose que sur certaines pages et pas d'autres. 

Je vous remercie! 

jqueryhtmlrecaptcha
8
avp

Cela fonctionne pour moi:

var CaptchaCallback = function() {
    if ( $('#RecaptchaField1').length ) {
        grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
        });
    }
    if ( $('#RecaptchaField2').length ) {
       grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
       });
    }
};
17
Jenny

J'ai eu le même problème et cette solution ne fonctionnait pas pour moi, mais j'en ai trouvé un.

En fait, j’ai utilisé le plugin wordpress Formulaire de contact 7 et, malheureusement, j’ai écrit les clés de recaptcha dans la partie intégration.

Cela a rendu la fonction recaptcha/api.js appelée deux fois et a provoqué cette erreur.

Donc, je viens de supprimer le plugin et de le réinstaller sans remplir la partie intégration et appelé recatpcha dans les fichiers header.php et footer.php et cela fonctionne :) 

Et n'oubliez pas de mettre le bouton recaptcha dans le formulaire de contact 

<div class="g-recaptcha" id="YOUR-ID" data-sitekey="YOUR-KEY" render="explicit"></div>
1
Hugo Blogueur