google recaptcha not working

[malorus]

Hi, please could you provide a full recaptcha example? For me it's not quite clear how the connection between recaptcha and the validator is. The example on the official website of the form validator is somewhat rudimentary. The official recaptcha docu suggests to put <div class="g-recaptcha" data-sitekey="your_site_key"></div> into the html. The form validator suggests to take <input data-validation="recaptcha" data-validation-recaptcha-sitekey="[RECAPTCHA_SITEKEY]">. But why an input-tag? I can't get it working as the validator does not notice if the recaptcha is executed or not. As recaptcha is today 'the way to go' for good spam control, I would appreciate if you could provide a full featured example. I believe many people could benefit from an example on the official website. Almost all features are really well explained and demonstrated... except the recaptcha feature. all the best... malorus

[skinnyvin]

I hit this snag too. The error in the console gave me a clue; Do not add the google javascript src yourself. The validator will do it for you. The input tag will get swapped out/hidden.

<script src='https://www.google.com/recaptcha/api.js'></script> <!-- Do NOT add this yourself -->

[Vinchoz]

Hi, Trying to add a Google reCAPTCHA. I followed the documentation:

`

`

and

``

As SKINNYVIN commented: the validator doesn't add the google javascript in my case... if i don't include it myself: the CAPTCHA is not displayed.

When i include myself: it ok it's displayed BUT

The validator check all field as usual but does not check the captcha .. and send the mail.

I was using jquery-3.1.1.min.js... i tried to donwgrade to jquery-2.2.4.min.js: stil not CAPTCHA check

Is someting wrong with my code?

Thank's for having a look

[DamiansDesign]

Also unable to get reCAPTCHA working.

jQuery v3.2.1 jQuery Form Validator v2.3.76

<input data-validation="recaptcha" data-validation-recaptcha-sitekey="[RECAPTCHA_SITEKEY]">

$.validate({
    form : '#contact-form',
    modules : 'security',
    onModulesLoaded : function() {
        alert('security module loaded!');
    },
    reCaptchaSiteKey: '[RECAPTCHA_SITEKEY]',
    reCaptchaTheme: 'light',
    onSuccess : function(form) {
        return $.sendFormDataViaAJAX(form);
        return false; // prevent ordinary form submission
    }
 });

The Google reCAPTCHA does not render on the page, only a blank input field. Clicking the input field (or perhaps it was clicking out of the input) I get the following console error:

Uncaught Error: Using undefined validator "validate_recaptcha". Maybe you have forgotten to load the module that "validate_recaptcha" belongs to?

Yet I get the onModulesLoaded alert.

If I manually add the Google script tag, reCAPTCHA renders, but validation doesn't work --form submission continues without reCAPTCHA ticked.

[victorjonsson]

@DamiansDesign Here you can see a working example using version 2.3.74 http://jsbin.com/dediguhuvo/edit?html,console,output . I have also tried it out locally using version 2.3.76 and was not able to reproduce the error.

You are not using the cdn so I guess that this problem has something todo with concatenation of the main javascript file of the jQuery-Form-Validator plugin. If you're concatenating the plugin file with other javascripts you also need to add the js-file of the validation module (form-validator/security.js)

[victorjonsson]

@Vinchoz you have not included the module

$.validate({
  modules: 'security',
  ...
});

[DamiansDesign]

@victorjonsson Thanks for the quick reply!

I can confirm it is now working, and it was completely my fault.

I was using a jQuery plugin loader, and that was somehow blocking the security module loading. It didn't matter if I used local js files or cdn, the security module just wouldn't load.

Thanks for confirming compatibility with jQuery v3.2.1.

[Vinchoz]

@victorjonsson Thanks for taking time to respond...

I tried to add the modules:

$.validate({ modules : 'security', lang: 'fr', validateOnBlur : false, errorMessagePosition : 'top', scrollToTopOnError : false, reCaptchaSiteKey: '6Ldo0****************', reCaptchaTheme: 'light' }); No change...

I decide to restart from your working example here ... http://jsbin.com/dediguhuvo/edit?html,console,output

<script> $.validate({ modules: 'security', reCaptchaTheme: 'light', reCaptchaSiteKey: '6Ldo*********', }); </script>

YES... was OK and check the form...

Then i did replace my first arg:

<script> $.validate({ modules: 'security', reCaptchaTheme: 'light', reCaptchaSiteKey: '6Ldo0********', lang: 'fr', }); </script>

Not working anymore... Do i have to separate these args?

[alphaelf]

@Vinchoz check lang/fr.js that must have badreCaptcha key and message in $.formUtils.LANG object