How to make Google reCAPTCHA a required field? - What you have to do is prevent the form submission until you can validate the user response by using the Google reCaptcha verify callback, then, if it passes, allow the form to submit. Check the documentation: https://developers.google.com/recaptcha/docs/display#example

no-captcha-recaptcha-validation.js

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 () {
    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 */
    }
})

Hi newsim,

The easiest thing would be to replace your
<div class="g-recaptcha" data-sitekey="my-site-key-asdasd-123"></div>
with
<div id="id"></div>

and it should work perfectly. I know it looks weird using the name "id" for "id".

OR

If you are comfortable with javascript, on line number 15 of the above javascript you can replace the value "id" with your own id, something like mycontainer as below
grecaptcha.render('mycontainer', {

and replace your
<div class="g-recaptcha" data-sitekey="my-site-key-asdasd-123"></div>
with
<div id="mycontainer"></div>

Hi sorry, a bit of a noob here, so I'm certain its basic mistakes, but I was wondering if you could explain the implementation a bit further, I can't quite understand where the google site key goes and so can't get it to render, and where I'm going wrong. Do I change "form-name" to the form ID? I tried the following but couldn't get it to work. The captcha graphic doesn't even show...

The below in the js file:

`<script type="text/javascript">
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 () {
grecaptcha.render('html_element', {
'sitekey': RC2KEY,
'callback': reCaptchaVerify,
'expired-callback': reCaptchaExpired
});
}

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

Then this in the form:

<div id="html_element"></div>

and this below the form:

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>