web-dev-qa-db-ja.com

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

laravelアプリケーションでrecaptchaを使用しています。

私はjqueryを使用してフォーム送信でrecaptchaの応答を確認し、プリーツがcaptchaを検証するアラートでユーザーを停止したいだけです。

しかし、キャプチャが入力されていなくても、フォームの送信を停止できませんでした。

これが私のコードです。

 $('#payuForm').on('submit', function (e) {

                    var response = grecaptcha.getResponse();

                    if(response.length == 0 ||  response == '' || response ===false ) {
                        alert('Please validate captcha.');
                        e.preventDefault();
                    }
                });



<div class="captcha">
 {{ View::make('recaptcha::display') }}
</div>

ブラウザコンソールでこのエラーが発生し、フォームが送信されます。

Error: ReCAPTCHA placeholder element must be empty
javascriptjqueryrecaptchalaravel-4.2
48
Nirali Joshi

Google recaptchaライブラリを2回ロードしています。

https://www.google.com/recaptcha/api.js

120
Waqas Bukhary

ライブラリを2回ロードしています

選んだ

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

または

     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
5
ztvmark

私は、Recaptchaとの統合が組み込まれているWordpress用のContactForm7を使用しています。また、同じrecaptchaライブラリを使用するBWP Recaptchaプラグインもあります。アクティベーションキーを誤って両方に追加したため、jsライブラリが2回読み込まれました。 CF7プラグインからキーを削除すると、エラーはなくなりました。

3
Gary D
WARNING: Tried to load angular more than once.

AngularJsでは、このエラーによりこのような問題が発生します。jqueryも同様に確認できます。

1
MaazKhan47

ダイナミックを含む必要がある場合は、ページの各キャプチャに対してこれをyouseします：

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

    <div class="g-recaptcha"></div>

    <script>
        var onloadCallback = function() {
            //remove old
            $('.g-recaptcha').html('');

            $('.g-recaptcha').each(function (i, captcha) {
                grecaptcha.render(captcha, {
                    'sitekey' : 'your key'
                });
            });
        };
    </script>

しかし、遅いです。最初のページですべてのrecaptchaを定義することもできます。 https://developers.google.com/recaptcha/docs/display

0
Дима Лобурец

空でない要素にreCaptchaをレンダリングしようとしたときにこのエラーが発生しました

<div class="g-recaptcha"  data-sitekey="{{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}">
      <div class="form-group">some element inside reCaptcha container</div>
</div>

reCaptchaプレースホルダー要素は空でなければなりません

<div class="g-recaptcha"  data-sitekey="{{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}"></div>
0
way2vin