How to Validate Google reCaptcha on Form Submit

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>

Solution 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

Solution 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.

Solution 3:

var googleResponse = jQuery('#g-recaptcha-response').val();
if (!googleResponse) {
    $('<p style="color:red !important" class=error-captcha"><span class="glyphicon glyphicon-remove " ></span> Please fill up the captcha.</p>" ').insertAfter("#html_element");
    return false;
} else {            
    return true;
}

Put this in a function. Call this function on submit... #html_element is my empty div.