How to Validate Google reCaptcha on Form Submit
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:
-
g-recaptcha-response
: Once user checks the checkbox (I am not a robot), a field with idg-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
-
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 }
-
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.
Solution 4
From a UX perspective, it can help to visibly let the user know when they can proceed to submit the form - either by enabling a disabled button, or simply making the button visible.
Here's a simple example...
<form>
<div class="g-recaptcha" data-sitekey="YOUR_PRIVATE_KEY" data-callback="recaptchaCallback"></div>
<button type="submit" class="btn btn-default hidden" id="btnSubmit">Submit</button>
</form>
<script>
function recaptchaCallback() {
var btnSubmit = document.getElementById("btnSubmit");
if ( btnSubmit.classList.contains("hidden") ) {
btnSubmit.classList.remove("hidden");
btnSubmitclassList.add("show");
}
}
</script>
Solution 5
when using JavaScript it will work for me
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitUserForm() {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>
<form method="post" onsubmit="return submitUserForm();">
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
<div id="g-recaptcha-error"></div>
<input type="submit" name="submit" value="Submit" />
</form>
Drew Kennedy
Salesforce software engineer and consultant for PwC for 2 years.
Updated on July 08, 2022Comments
-
Drew Kennedy almost 2 years
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>