web-dev-qa-db-de.com

Nicht erfasster Fehler: Das ReCAPTCHA-Platzhalterelement muss ein Element oder eine ID sein

Ich füge ReCAPTCHA zu einer (Bootstrap Jekyll) Website hinzu, die über mehrere Kontaktformulare verfügt. Es gibt ein Popup-Modal in der Fußzeile, einen gelegentlichen Abschnitt "Jetzt Kontakt aufnehmen" und auf mehreren Seiten auch "Weitere Informationen zu ____ anfordern". 

Da ich mehrere Kontaktformulare auf einer einzigen Seite habe, musste ich jedes ReCAPTCHA explizit rendern. Hier ist der Code dafür: 

In meinem Javascript: 

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

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

In der Fußzeile (auf allen Seiten enthalten)

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

(und am unteren Rand der Fußzeile)

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

Dies funktioniert gut auf einer Seite mit zwei separaten Kontaktformularen (dh ich habe ein weiteres div auf der Seite mit der ID von RecaptchaField2), aber wenn ich auf einer Seite lande, die nur ein Kontaktformular hat, gibt die Konsole einen Fehler aus ( Nicht erfasster Fehler: Das ReCAPTCHA-Platzhalterelement muss ein Element oder eine ID sein. 

Der ReCAPTCHA scheint trotzdem zu funktionieren, aber kann mir jemand helfen zu verstehen, was diesen Fehler verursacht? Alle meine Recherchen deuten darauf hin, dass die Bibliothek zweimal importiert wurde. Ich gehe jedoch davon aus, dass dies nicht der Fall ist, da das Problem nur auf einigen Seiten auftritt und nicht auf anderen. 

Vielen Dank! 

8
avp

Das funktioniert für mich:

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

Ich habe das gleiche Problem und diese Lösung hat für mich nicht funktioniert, aber ich habe eines gefunden.

Tatsache war, dass ich das Plugin WordPress-Kontaktformular 7 verwendet habe, und leider habe ich die Schlüssel der Recaptcha im Integrationsteil geschrieben.

Dadurch wurde die Funktion recaptcha/api.js zweimal aufgerufen und dieser Fehler gemacht.

Also habe ich das Plugin einfach gelöscht und neu installiert, ohne den Integrationsteil auszufüllen, und das recatpcha in den Dateien header.php und footer.php aufgerufen und das funktioniert :) 

Vergessen Sie nicht, die Schaltfläche Recaptcha in das Kontaktformular aufzunehmen 

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