How to Validate Google reCaptcha on Form Submit

You can verify the response in 3 ways as per the Google reCAPTCHA documentation:

1. g-recaptcha-response: Once user checks the checkbox (I am not a robot), a field with id g-recaptcha-response gets populated in your HTML.
   You can now use the value of this field to know if the user is a bot or not, using the below mentioed lines:-

   var captchResponse = $('#g-recaptcha-response').val();
   if(captchResponse.length == 0 )
       //user has not yet checked the 'I am not a robot' checkbox
   else 
       //user is a verified human and you are good to submit your form now
   

2. Before you are about to submit your form, you can make a call as follows:-

   var isCaptchaValidated = false;
   var response = grecaptcha.getResponse();
   if(response.length == 0) {
       isCaptchaValidated = false;
       toast('Please verify that you are a Human.');
   } else {
       isCaptchaValidated = true;
   }
   
   
   if (isCaptchaValidated ) {
       //you can now submit your form
   }
   

3. You can display your reCAPTCHA as follows:-

   <div class="col s12 g-recaptcha" data-sitekey="YOUR_PRIVATE_KEY" data-callback='doSomething'></div>
   

   And then define the function in your JavaScript, which can also be used to submit your form.

   function doSomething() { alert(1); }
   

   Now, once the checkbox (I am not a robot) is checked, you will get a callback to the defined callback, which is doSomething in your case.

If you want to check if the User clicked on the I'm not a robot checkbox, you can use the .getResponse() function provided by the reCaptcha API.

It will return an empty string in case the User did not validate himself, something like this:

if (grecaptcha.getResponse() == ""){
    alert("You can't proceed!");
} else {
    alert("Thank you");
}

In case the User has validated himself, the response will be a very long string.

More about the API can be found on this page: reCaptcha Javascript API