Validating submit of form with Google reCAPTCHA
Question
I've had a look at this question
How to Validate Google reCaptcha on Form Submit
And tried to implement the answer of that question into my code to validate my form so that it won't submit if the captcha hasn't been completed.
However nothing happens - it just submits the form.
this is my code:
<head>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'my_site_key'
});
};
</script>
</head>
<div id="html_element"></div>
<br>
<input type="submit" value="Submit" onclick="myFunction">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
function myFunction() {
if(grecaptcha.getResponse() == "")
alert("You can't proceed!");
else
alert("Thank you");}
</script>
Can anyone help?
EDIT
<html>
<head>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'site-key'
});
};
onloadCallback();
$('form').on('submit', function(e) {
if(grecaptcha.getResponse() == "") {
e.preventDefault();
alert("You can't proceed!");
} else {
alert("Thank you");
}
});
</script>
</head>
<body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>
</body>
2 answers
solution1
6 ACCPTED 2015-12-07 12:49:30
You need to trigger your if statement in an event . If you're using jQuery you can do this very easily:
$('form').on('submit', function(e) {
if(grecaptcha.getResponse() == "") {
e.preventDefault();
alert("You can't proceed!");
} else {
alert("Thank you");
}
});
See working example here: JSFiddle
The problem with doing this in JavaScript at all is that the user can easily fake the result if they want to. If you really want to be checking if the user is a robot or not, you should still be comparing the result submitted by the user (via POST) on the server side using your reCAPTCHA secret key.
solution2
-1 2018-01-17 19:28:24
Here is the server-side solution that requires no jQuery/javascript other than the embed code provided by google.
When the user submits the form on your site containing reCaptcha, look for the "g-recaptcha-response" POST parameter on the server-side.
Then send your own http post request to this url: https://www.google.com/recaptcha/api/siteverify
The POST parameters that you send as part of this request are:
secret - Required. The shared key between your site and reCAPTCHA.
response - Required. The user response token provided by reCAPTCHA, verifying the user on your site.
remoteip - Optional. The user's IP address.
Then you should get back something like this from Google which you can check for success.
{ "success": true|false, "challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ) "hostname": string, // the hostname of the site where the reCAPTCHA was solved "error-codes": [...] // optional }
if success = true, display a success message, or redirect to a success page .
if success = false, display the form again with a message that says there is a slight chance they are a robot and to please try again.
See here for more info:
https://developers.google.com/recaptcha/docs/verify , http://dotnettec.com/google-recaptcha-example-javascript/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.