Search code examples
javascriptjqueryrecaptchainvisible-recaptcha

GettUncaught Error: reCAPTCHA placeholder element must be empty ; loaded only once

I'm getting following error on using v2 invisible capcha

recaptcha__en.js:513 Uncaught Error: reCAPTCHA placeholder element must be empty at YG (recaptcha__en.js:513) at recaptcha__en.js:520 at Array.forEach () at pG (recaptcha__en.js:520) at xG (recaptcha__en.js:517) at recaptcha__en.js:507 at j$ (recaptcha__en.js:304) at RZ (recaptcha__en.js:507) at recaptcha__en.js:523 at recaptcha__en.js:543

I have searched but everywhere it is saying you are loading script multiple times, which I think i'm not doing

Network Activity

Following is my code


    <div class="osnlogin-button">
        <a type="submit" href="" id="recaptcha-submit" class="osnlogin-signin-btn g-recaptcha"><span class="signin lightboxed">Login</span></a>
    </div>
    <div class="g-recaptcha" data-sitekey="xxx" data-bind="recaptcha-submit" data-callback="onCapchaValidated">
    </div>


    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    var onCapchaValidated = function () {
        $('#loginForm').submit();
    };
Solution

  • Just fixed it. Was using "g-recaptcha" class on more than one attribute. I think it should be only on one element in a page.

    Original

     <div class="osnlogin-button">
    <a type="submit" href="" id="recaptcha-submit" class="osnlogin-signin-btn g-recaptcha"><span class="signin lightboxed">Login</span></a>
</div>
<div class="g-recaptcha" data-sitekey="xxx" data-bind="recaptcha-submit" data-callback="onCapchaValidated">
</div>

    Updated

    <div class="osnlogin-button">
    <a type="submit" href="" id="recaptcha-submit" class="osnlogin-signin-btn"><span class="signin lightboxed">Login</span></a>
</div>
<div class="g-recaptcha" data-sitekey="xxx" data-bind="recaptcha-submit" data-callback="onCapchaValidated">
</div>

    It worked finally