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

Does this work: `` If not, do you include the script twice on accident perchance? — HC_, May 10 '16 at 17:07

Syed Waqas Bukhary · Accepted Answer · 2016-09-05T17:29:30.127

124

You are loading the google recaptcha library twice.

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

edited Sep 05 '16 at 17:29

answered Sep 03 '16 at 09:19

Syed Waqas Bukhary

5,130
5
47
59

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? – jstuardo May 02 '17 at 11:49
4

How to prevent the script from being loaded twice? Since it is loaded by default when the '<%= recaptcha_tags %>' is rendered in Ruby. – Farhad Sep 11 '17 at 12:05
in my case i've loaded only once, still i am having the issue – Beingnin Oct 22 '18 at 07:50
@NithinChandran I don't think so. Confirm this in google chrome dev tools. It is possible that it is loaded twice from another script. – Syed Waqas Bukhary Oct 22 '18 at 08:09

score 8 · Answer 2 · answered Jul 17 '17 at 23:35

8

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>

answered Jul 17 '17 at 23:35

ztvmark

1,319
15
11

way2vin · Answer 3 · 2018-08-29T06:08:43.883

5

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>

edited Aug 29 '18 at 06:08

answered Aug 29 '18 at 06:03

way2vin

2,411
1
20
15

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. – Sayed Jan 13 '22 at 10:38

score 3 · Answer 4 · answered May 08 '17 at 22:54

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.

score 1 · Answer 5 · answered Jun 22 '17 at 07:06

1

WARNING: Tried to load angular more than once.

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

answered Jun 22 '17 at 07:06

MaazKhan47

811
1
11
22

score 1 · Answer 6 · answered Aug 25 '21 at 15:27

1

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>

answered Aug 25 '21 at 15:27

mgraph

15,238
4
41
75

score 0 · Answer 7 · answered Jul 26 '17 at 12:21

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

score 0 · Answer 8 · answered May 11 '20 at 10:57

0

This worked for me.

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

answered May 11 '20 at 10:57

Siddhant

196
2
9

score 0 · Answer 9 · answered Aug 12 '21 at 23:30

0

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.

answered Aug 12 '21 at 23:30

elaineee

93
1
2
12

score 0 · Answer 10 · answered Sep 15 '22 at 13:07

0

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.

answered Sep 15 '22 at 13:07

Neo Murphy

67
1
9

Error: ReCAPTCHA placeholder element must be empty

10 Answers10

Linked