web-dev-qa-db-ja.com

不明なエラー：ReCAPTCHAプレースホルダー要素は要素またはIDでなければなりません

ReCAPTCHAを、複数の問い合わせフォームがある（Bootstrap Jekyll）Webサイトに追加しています。フッターにポップアップモーダルがあり、「今すぐお問い合わせください」セクションがあります。また、いくつかのページに「____の詳細情報をリクエストしてください」というセクションがあります。

1つのページに複数の連絡先フォームがあるため、各ReCAPTCHAを明示的にレンダリングする必要がありました。そのためのコードは次のとおりです。

私のjavascriptで：

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

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

フッター（すべてのページに含まれる）

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

（およびフッターの下部）

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

これは、2つの個別の連絡先フォームがあるページ（つまり、RecaptchaField2のIDを持つページに別のdivがある）でうまく機能しますが、連絡先フォームが1つしかないページに着地すると、コンソールはエラーをスローします（不明なエラー：ReCAPTCHAプレースホルダー要素は要素またはIDでなければなりません）。

とにかくReCAPTCHAは機能しているようですが、このエラーの原因を理解するのに役立つ人はいますか？私が行ったすべての研究は、ライブラリを2回インポートすることによるものであることを示していますが、問題は一部のページでのみ発生し、他のページでは発生しないため、そうではないと想定しています。

ありがとうございました！

jqueryhtmlrecaptcha
9
avp

これは私のために働く：

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

同じ問題が発生し、この解決策はうまくいきませんでしたが、私はそれを見つけました。

実際には、プラグインを使用していましたwordpress Contact form 7と、残念ながら、統合部分にrecaptchaのキーを書いています。

これにより、関数recaptcha/api.jsが2回呼び出され、このエラーが発生しました。

だから私はちょうどプラグインを削除し、統合部分を埋めずに再インストールし、ファイルheader.phpとfooter.phpでrecatpchaを呼び出しましたが、それは動作します:)

そして、連絡フォームにボタンを追加することを忘れないでください

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