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 capt

Answer 1

You are loading the google recaptcha library twice.

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

Answer 2

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>

Answer 3

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>

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.