Menu
I have followed
How to Validate Google reCaptcha on Form Submit
I have below code in my index.php
<!DOCTYPE HTML>
<html>
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form method="post" action="post.php">
<div class="g-recaptcha" data-sitekey="6XXXXXXXXXXXXwdsf0K8HbXXXXXXX"></div>
<input type="submit" value="Submit" />
</form>
</body>
</html>
post.php
$response = $_REQUEST['g-recaptcha-response'];
$secret = '6XXXXXXXXXXXXwdsf0K8HbJNvMw-XXXX';
$server = $_SERVER['REMOTE_ADDR'];
$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=" . $secret . "&response=" . $response.'&remoteip='.$server);
$response = json_decode($response, true);
if ($response["success"] === true) {
echo "Logged In Successfully";
} else {
echo "You are a robot";
}
exit;
Above code is working fine.
How to do client side validation? It's not showing Captcha with Images Option.
I already done below
735
This is the standard behavior of the Recaptcha library does not display the first time the control over the images.
Try to view or post the page many times and you will see that the images not eventually appear.
If you want to do some client side validation on other additionnals fields, you must use jQuery or standar library like bootstrap or foundation, like this or this. You can see of full example of a working script here (inspired from bootstrap script and HTML 5 capabilities) :
This version of the script is the same all over Internet. No more client side validation for this ! Have a look to a reference : codepen.io signup
For example :
<!DOCTYPE HTML>
<html>
<head>
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form class="signin-form" method="post" action="post.php">
<!-- for example : Email and password validation (HTML 5) -->
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<!-- Site-key for automated tests -->
<div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</body>
</html>
And here a sample code pen.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
