Make Google reCaptcha required and use in JQuery Ajax

Add reCaptcha in HTML form

1 2	<script src='https://www.google.com/recaptcha/api.js'></script> <div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY"></div>

Get reCaptcha Value in jQuery and pass in ajax

1 2	var g_recaptcha_response = grecaptcha.getResponse(); var dataString = 'uname='+ uname + '& g-recaptcha-response=' + g_recaptcha_response;

Validate reCaptcha

$secret = 'YOUR-SECRET-KEY'; //google captcha check

//get verify response data

$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);

$responseData = json_decode($verifyResponse);

if($responseData->success){

//Do if captcha is valid

}

Make reCaptcha checkbox required

<style>

#g-recaptcha-response {

display: block !important;

position: absolute;

margin: -78px 0 0 0 !important;

width: 302px !important;

height: 76px !important;

z-index: -999999;

opacity: 0;

}

</style>

window.addEventListener('load', () => {

const $recaptcha = document.querySelector('#g-recaptcha-response');

if ($recaptcha) {

$recaptcha.setAttribute('required', 'required');

}

})

</script>

Reset reCaptcha

For reCaptcha v2, use:

1 2	grecaptcha.<span class="hljs-title function_">reset</span>();

If you’re using reCaptcha v1 (probably not):

1	<span class="hljs-title class_">Recaptcha</span>.<span class="hljs-title function_">reload</span>();