Uncaught ReferenceError: Recaptcha is not defined

Question

I am running into an issue with implementing the reCaptcha control on a contact form.

The following error is thrown on load: Uncaught ReferenceError: Recaptcha is not defined

Here is a partial snippet of the code I am using:

<form role="form" id="ContactMessageForm">
    <div class="form-group">
        <div id="CaptchaContainer"></div>
    </div>
    <button type="button" class="btn btn-default" id="ContactMessageSendButton">Send</button>
</form>

<script type="text/javascript" src="/scripts/mail.min.js" defer="defer"></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
    $(document).ready(function () { 
        /* Initialize reCaptcha Control */
        Recaptcha.destroy();
        Recaptcha.create('6Lc4V_ASAAAAAMnnwUcaTewH1mlOdylMgAyxb_m6', 'CaptchaContainer', {
            theme: 'clean',
            callback: Recaptcha.focus_response_field
        });
    });
</script>

There is most likely a typo in my code, but I am just not seeing it.

You can see the actual error get fired at: http://eat-sleep-code.com/#!/contact

Seems like it's a timing problem between your HTML code load (form+script) and execution of $(document).ready() which is before the recaptcha load event. — progysm, Mar 20 '14 at 20:24
@progysm : Not sure I follow. Since the Recaptcha.create call is inside the $(document).ready(), it shouldn't fire until the form and script is done loading. — eat-sleep-code, Mar 20 '14 at 21:33
you are already loading the "contact" content inside a $(document).ready() in render.js/renderContent(), so any other document.ready() will be immediate. — progysm, Mar 20 '14 at 21:54
Wow, learned something new. So, what do you think would be the best way to handle it. Should I should wrap it in a setTimeout and check to see if Recaptcha is defined? — eat-sleep-code, Mar 20 '14 at 22:45
setTimeout could work sometimes if you wait long enough and there is no problem on google side... I'm not sure what is the best option. Maybe I would add a patch in render to check for 'contact' in the location.hash, then add the google recaptcha script with document.createElement('script') and check for .onload event to start using Recaptcha object. — progysm, Mar 20 '14 at 22:50

score 3 · Answer 1 · answered Jul 07 '14 at 08:46

3

I have had the same problem and i fixed it with following

<script type="text/javascript">
    $.getScript( "http://www.google.com/recaptcha/api/js/recaptcha_ajax.js", function() {
        Recaptcha.create("<PUBLIC_KEY>", "recaptchadiv", {theme: "clean"});
    });
</script>

answered Jul 07 '14 at 08:46

dariush

3,191
3
24
43

Thanks it did work but what about the callback using the Recaptcha ? – Benoît Dec 15 '20 at 15:31

score 1 · Answer 2 · answered May 04 '21 at 13:27

I ended up on this question years later for a client of mine. The problem is slightly different though. I turned on ReCaptcha V2 (google). It wasn't working but only showing captcha* below the form.

In the console it said it couldn't find jquery. I figured something was wrong with the ordering of js loading but I couldn't find the answer.

For me the solution was to go to the template and turn off "optimize js". After that it was working. Hope this will save someone else a few hours :)

score 0 · Answer 3 · answered Mar 25 '14 at 14:49

Using the feedback from @progysm I moved the call to recaptcha_ajax.js so that it was loaded before the renderContent() function was called. This allowed the Captcha image to be displayed.

Unfortunately, I ended up having to abandon the reCaptcha control for this application as the validation methods were blocked due to cross site scripting methods.

score 0 · Answer 4 · answered Mar 25 '14 at 15:14

0

Please confirm if you have given in the right public key and not the private key as following

Recaptcha.create('<public_key>', 'CaptchaContainer', {
        theme: 'clean',
        callback: Recaptcha.focus_response_field
});

answered Mar 25 '14 at 15:14

A J

2,112
15
24

Uncaught ReferenceError: Recaptcha is not defined

4 Answers4

Linked