Error: ReCAPTCHA placeholder element must be empty

Question

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

Institutive

Does this work: <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> If not, do you include the script twice on accident perchance? – Buttery

Answer 1

You are loading the google recaptcha library twice.

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

Julissajulita

I have this same problem.. and when I see Google Chrome console I see that api.js is loaded once, but recaptcha__es.js is loaded three times. What may be the problem here? – Raptorial

How to prevent the script from being loaded twice? Since it is loaded by default when the '<%= recaptcha_tags %>' is rendered in Ruby. – Unlovely

in my case i've loaded only once, still i am having the issue – Centenary

@NithinChandran I don't think so. Confirm this in google chrome dev tools. It is possible that it is loaded twice from another script. – Julissajulita

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

or

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

Deettadeeyn

Answer 3

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>

Sabinesabino

This is the right answer. I was using id of the button which had an icon inside. Setting the id to icon instead fixed the problem. – Stevenson

Answer 4

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.

Fennessy

Answer 5

WARNING: Tried to load angular more than once.

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

Impotent

Answer 6

In my case I was using a link as button :

<a class="g-recaptcha"  data-sitekey="...">Submit</a>

I fixed this by using Button element instead:

<button class="g-recaptcha"  data-sitekey="...">Submit</button>

Legislatorial

Answer 7

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

Syndesis

Answer 8

This worked for me.

<script>
    var onloadCallback = function() {
        if (captcha.length ) {
            grecaptcha.render(captcha, {
                'sitekey' : 'your key'
            });
        }
    };
</script>

Nefen

Answer 9

If you are using something like postscribe to load recaptcha asynchronous script, you must use one container (div) to inject script tag and another to make as target to instance reCAPTCHA, two divs.

Cowbane

Answer 10

It says that the container should be empty. example:

<div id="recaptcha-container"></div>

make sure this div is empty as above and pass this id to RecaptchaVerifier so problem will be resolved.

note: you must have to define this container in html.

Appose