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

You are loading the google recaptcha library twice.

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

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>

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>

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.

WARNING: Tried to load angular more than once.

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

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

This worked for me.

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

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.

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>