Google ReCAPTCHA how to make required?

Question

Does anyone know how to make the "Google ReCAPTCHA (v2)" be "required" in a form?

I mean no form submission until recaptcha is filled-in?

I use ParsleyJs in my form, but didnt find a way to make it work with divs...

Answer 1

You have to use the reCaptcha verify response call back. Something like this: <script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'></script>

var RC2KEY = 'sitekey',
    doSubmit = false;

function reCaptchaVerify(response) {
    if (response === document.querySelector('.g-recaptcha-response').value) {
        doSubmit = true;
    }
}

function reCaptchaExpired () {
    /* do something when it expires */
}

function reCaptchaCallback () {
    /* this must be in the global scope for google to get access */
    grecaptcha.render('id', {
        'sitekey': RC2KEY,
        'callback': reCaptchaVerify,
        'expired-callback': reCaptchaExpired
    });
}

document.forms['form-name'].addEventListener('submit',function(e){
    if (doSubmit) {
        /* submit form or do something else */
    }
})

Answer 2

For ParsleyJS you will to do a little workaround:

1.Add hidden input field, with data-parsley-required="true", value = "", like this:

<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">

2.Add error container (just below or under your g-recaptcha div):

<span id='errorContainer'></span>

3.Add this simple function somewhere in your js code:

function recaptchaCallback() {
    document.getElementById('myField').value = 'nonEmpty';
}

4.Add the attribute data-callback with value of custom function:

<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>