In this article, you will learn what is reCAPTCHA? and how to implement google reCAPTCHA javascript validation to your bootstrap form. Keep reading on Gmail Login Page Html Code, How to validate latitude and longitude value.
What is reCAPTCHA?
reCAPTCHA is a free service that protects your site from spam and abuse. It uses advanced risk analysis techniques to tell humans and bots apart. To start using reCAPTCHA, you need to sign up for an API key pair for your site. The key pair consists of a site key and a secret key. The secret key authorizes communication between your application backend and the reCAPTCHA server to verify the user’s response.
Google reCAPTCHA JavaScript Validation
There are two ways to validate google reCAPTCHA: Server-side and Client-side. In this blog post, I will focus on client-side validation and discuss how to validate Google reCAPTCHA using JavaScript. Follow the below steps:-
Step 1: Let’s get started, you need to register your site here https://www.google.com/recaptcha/admin
Step 2: Once you have submitted the details you will get your site key and secret key as shown below:-
In order to integrate Recaptcha into your HTML/Bootstrap form you need to follow these points:
- First, you need to include <div class=”g-recaptcha” data-sitekey=”site key”></div> in your form (replace the site key with your own key).
- Include Google recaptcha API to initialize recaptcha on your form <script src=’https://www.google.com/recaptcha/api.js’ />
- I have used data-callback and data-expired-callback attributes on the g-recaptcha div. These are optional but I used them to make recaptcha cooperate with the validator.
Step 3: Find the below structure of bootstrap from where you need to recaptcha.
<div class="form-group"> <div class="g-recaptcha" data-sitekey="6Les_LUUAAAAAOwAecAV2bvGOrePoZVQPLDOJcs_" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div> <input class="form-control d-none" data-recaptcha="true" required data-error="Please complete the Captcha"> <div class="help-block with-errors"></div> </div>
Follow all the steps and you are done. Find the full source code below:-
<html>
<head>
<title>How to validate Google reCAPTCHA in JavaScript</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,500' rel='stylesheet' type='text/css'>
<link href='custom.css' rel='stylesheet' type='text/css'>
<meta name="msvalidate.01" content="B7807734CA7AACC0779B341BBB766A4E" />
<meta name="p:domain_verify" content="78ad0b4e41a4f27490d91585cb10df4a"/>
<style>
.list-unstyled {
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-8 offset-xl-2">
<h1 class="mb-3">Google reCAPTCHA JavaScript Validation</h1>
<form id="contact-form" method="post" action="https://www.htmlhints.com/recaptcha/contact" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_name">First Name*</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Enter your first name" required="required"
data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="form_lastname">Last Name*</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Enter your last name" required="required"
data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="form_email">Email*</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Enter your email" required="required"
data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Enter your phone no.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="form_message">Message*</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Enter your message" rows="4" required="required"
data-error="Please, leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LehO8gUAAAAAAcOEamYPOViZTD7PslHlGiX_" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
<input class="form-control d-none" data-recaptcha="true" required data-error="Please complete the Captcha">
<div class="help-block with-errors"></div>
</div>
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</form>
</div>
<!-- /.8 -->
</div>
<!-- /.row-->
</div>
<!-- /.container-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="validator.js"></script>
<script src="contact.js"></script>
</body>
</html>
Live Demo | Download Source Code
Leave a Reply