Error: ReCAPTCHA placeholder element must be empty

问题

I am using recaptcha with my laravel application.

I just want to check recaptcha's response on form submit using jquery and stop user by alert that pleade validate captcha.

but , I could not stop form submission even if captcha is not filled.

here is my code.

 $('#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>

I am getting this error in browser console , and form gets submit.

Error: ReCAPTCHA placeholder element must be empty

回答1:

You are loading the google recaptcha library twice.

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

回答2:

You are loading the library 2 times

chose

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

回答3:

I am using ContactForm7 for Wordpress, which has a built-in integration with Recaptcha. I also have the BWP Recaptcha plugin, which uses the same recaptcha libraries. I had mistakenly added my activation keys to both, which was causing the js library to load twice. Once I removed the keys from the CF7 plugin the error went away.

回答4:

WARNING: Tried to load angular more than once.

In AngularJs this error causes such problems You can check for jquery likewise.

回答5:

Just youse this for each captcha at the page if you need dynamic including:

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

But it is slow. You can also define all recaptchas at page initially: https://developers.google.com/recaptcha/docs/display

回答6:

I got this error when I tried to render reCaptcha on non empty element

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

reCaptcha placeholder element must be empty

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

来源：https://stackoverflow.com/questions/37021241/error-recaptcha-placeholder-element-must-be-empty

标签

javascript

jquery

recaptcha

laravel-4.2