How to Validate Google reCaptcha on Form Submit

Question

Recently, Google completely overhauled their reCaptcha API and simplified it to a single checkbox.

The problem is, I can submit a form with the reCaptcha included without checking it and the form will ignore the reCaptcha.

Before you had to send the form to a PHP file with the private key et al, but I'm not seeing any mention of that in their Developer's Guide. I have no idea how to validate the form to be sure the new reCaptcha was filled by the user.

Am I missing something? Is that PHP file with the private key still required?

All I have for the reCaptcha so far is:

<div data-type="image" class="g-recaptcha" data-sitekey="My Public Key"></div> 

Answer 1

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

Answer 2

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.