CODEWITHSUNDEEP
javascriptjqueryrecaptchalaravel-4.2
Nirali Joshi
Nirali Joshi

Reputation: 2008

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

Upvotes: 55

Views: 72776

Answers (10)

Junaid Gul
Junaid Gul

Reputation: 81

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.

Upvotes: 0

mgraph
mgraph

Reputation: 15338

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>

Upvotes: 1

elaineee
elaineee

Reputation: 93

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.

Upvotes: 0

Siddhant
Siddhant

Reputation: 196

This worked for me.

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

Upvotes: 0

way2vin
way2vin

Reputation: 2551

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>

Upvotes: 6

Дима Лобурец
Дима Лобурец

Reputation: 1

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

Upvotes: 0

ztvmark
ztvmark

Reputation: 1448

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>

Upvotes: 8

MaazKhan47
MaazKhan47

Reputation: 849

WARNING: Tried to load angular more than once.

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

Upvotes: 1

Gary D
Gary D

Reputation: 153

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.

Upvotes: 3

Syed Waqas Bukhary
Syed Waqas Bukhary

Reputation: 5340

You are loading the google recaptcha library twice.

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

Upvotes: 124

Related Questions