Make Google reCaptcha required and use in JQuery Ajax

Admin

4 months ago

Add reCaptcha in HTML form

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

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

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

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
}

$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

<!-- GCaptcha require karne ke liye-->
    <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>
    <script>
        window.addEventListener('load', () => {
      const $recaptcha = document.querySelector('#g-recaptcha-response');
      if ($recaptcha) {
        $recaptcha.setAttribute('required', 'required');
      }
    })
    </script>
<!-- -->

<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:

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

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

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

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

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