In this tutorial, I will explain to you about how to setup Google ReCAPTCHA in custom form using jQuery form validation.
Let’s start with our custom validation form with Google’s ReCAPTCHA v2 bot verification.
There is also an element with ID google_recaptcha to load Google ReCAPTCHA.
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" integrity="sha256-sPB0F50YUDK0otDnsfNHawYmA5M0pjjUf4TvRJkGFrI=" crossorigin="anonymous">
</script>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('google_recaptcha', {
'sitekey' : '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
});
};
</script>
</head>
<body>
<form action="?" method="POST" id="loginForm">
<div id="google_recaptcha"></div>
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
$("#loginForm").validate({
submitHandler: function(form) {
if (grecaptcha.getResponse()) {
alert('Captcha Confirmed!');
//form.submit();
}
else {
alert('Please confirm captcha to proceed');
}
}
});
</script>
</body>
</html>To load ReCAPTCHA v2 you need your own key which you need to place in sitekey Check here to know How to get ReCAPTCHA key ?
For ReCAPTCHA v2, use the following test keys. You will always get No CAPTCHA and all verification requests will pass.
Site key : 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
Secret key : 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
Click here to know more.
