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

Solution 1

You are loading the google recaptcha library twice.

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

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

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

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

Solution 5

WARNING: Tried to load angular more than once.

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

View more solutions

Comments

[jstuardo]

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?

[Farhad]

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

[Beingnin]

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

[Syed Waqas Bukhary]

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

[Sayed]

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.