Jquery Captcha Widget

In this article, we will understand the jquery captcha widget plugin with the help of various examples. In this we will create a math equation captcha and a simple captcha plugin that creates a canvas-based alphanumeric captcha widget to test if your visitor is a bot or a human.

Example 1:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}
header { 
  background-color: #fff; 
  padding: 5px 15px 0px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}
h1 {
  font-size: 28px; 
  font-weight: 700; 
  margin: 0px; 
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
line-height: 1;  
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
}
h2 { font-size : 16px; font-weight: 300; margin-top: 5px; line-height: 22px; color: red;  
  letter-spacing: 1px;  
  text-align: center;   }
h2 > * { display: inline-block; vertical-align: top; }
fieldset { 
  border: 1px solid #ccc; 
  padding: 15px; 
  max-width: 345px;
  background-color: #fff;
  border-radius: 5px;
}
section { padding: 0 15px; }
.CaptchaWrap { position: relative; }
.CaptchaTxtField { 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: block;  
  box-sizing: border-box;
}
#UserCaptchaCode { 
  padding: 15px 10px; 
  outline: none; 
  font-size: 18px; 
  font-weight: normal; 
  font-family: 'Open Sans', sans-serif;
  width: 343px;
}
#CaptchaImageCode { 
  text-align:center;
  margin-top: 15px;
  padding: 0px 0;
  width: 300px;
  overflow: hidden;
}
.capcode { 
  font-size: 46px; 
  display: block; 
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none; 
  cursor: default;
  letter-spacing: 1px;
  color: #ccc;
  font-family: 'Roboto Slab', serif;
  font-weight: 100;
  font-style: italic;
}
.ReloadBtn { 
  background:url('https://cdn3.iconfinder.com/data/icons/basic-interface/100/update-64.png') left top no-repeat;   
  background-size : 100%;
  width: 32px; 
  height: 32px;
  border: 0px; outline none;
  position: absolute; 
  bottom: 30px;
  left : 310px;
  outline: none;
  cursor: pointer; 
}
.btnSubmit {
  margin-top: 15px;
  border: 0px;
  padding: 10px 20px; 
  border-radius: 5px;
  font-size: 18px;
  background-color: #1285c4;
  color: #fff;
  cursor: pointer;
}
.error { 
  color: red; 
  font-size: 12px; 
  display: none; 
}
.success {
  color: green;
  font-size: 18px;
  margin-bottom: 15px;
  display: none;
}
</syle>
<body>
<header>
  <h1> Example </h1>
  <h2> Jquery Captcha Widget </h2>
</header>
<center>
<section>
  <fieldset>
    <span id="SuccessMessage" class="success">Hurray! Your have successfully entered the captcha.</span>
    <input type="text" id="UserCaptchaCode" class="CaptchaTxtField" placeholder='Enter Captcha - Case Sensitive'>
    <span id="WrongCaptchaError" class="error"></span>
    <div class='CaptchaWrap'>
      <div id="CaptchaImageCode" class="CaptchaTxtField">
        <canvas id="CapCode" class="capcode" width="300" height="80"></canvas>
      </div> 
      <input type="button" class="ReloadBtn" onclick='CreateCaptcha();'>
    </div>
    <input type="button" class="btnSubmit" onclick="CheckCaptcha();" value="Submit">
  </fieldset>
</section>
</center>
<script>
var cd;
$(function(){
  CreateCaptcha();
});
function CreateCaptcha() {
  $('#InvalidCapthcaError').hide();
  var alpha = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9');              
  var i;
  for (i = 0; i < 6; i++) {
    var a = alpha[Math.floor(Math.random() * alpha.length)];
    var b = alpha[Math.floor(Math.random() * alpha.length)];
    var c = alpha[Math.floor(Math.random() * alpha.length)];
    var d = alpha[Math.floor(Math.random() * alpha.length)];
    var e = alpha[Math.floor(Math.random() * alpha.length)];
    var f = alpha[Math.floor(Math.random() * alpha.length)];
  }
  cd = a + ' ' + b + ' ' + c + ' ' + d + ' ' + e + ' ' + f;
  $('#CaptchaImageCode').empty().append('<canvas id="CapCode" class="capcode" width="300" height="80"></canvas>')
  var c = document.getElementById("CapCode"),
      ctx=c.getContext("2d"),
      x = c.width / 2,
      img = new Image();
  img.src = "https://pixelsharing.files.wordpress.com/2010/11/salvage-tileable-and-seamless-pattern.jpg";
  img.onload = function () {
      var pattern = ctx.createPattern(img, "repeat");
      ctx.fillStyle = pattern;
      ctx.fillRect(0, 0, c.width, c.height);
      ctx.font="46px Roboto Slab";
      ctx.fillStyle = '#ccc';
      ctx.textAlign = 'center';
      ctx.setTransform (1, -0.12, 0, 1, 0, 15);
      ctx.fillText(cd,x,55);
  }; }
function ValidateCaptcha() {
  var string1 = removeSpaces(cd);
  var string2 = removeSpaces($('#UserCaptchaCode').val());
  if (string1 == string2) {
    return true;
  }
  else {
    return false;
  } }
function removeSpaces(string) {
  return string.split(' ').join('');
}
function CheckCaptcha() {
  var result = ValidateCaptcha();
  if( $("#UserCaptchaCode").val() == "" || $("#UserCaptchaCode").val() == null || $("#UserCaptchaCode").val() == "undefined") {
    $('#WrongCaptchaError').text('Please enter code given below in a picture.').show();
    $('#UserCaptchaCode').focus();
  } else {
    if(result == false) { 
      $('#WrongCaptchaError').text('Invalid Captcha! Please try again.').show();
      CreateCaptcha();
      $('#UserCaptchaCode').focus().select();
    }
    else { 
      $('#UserCaptchaCode').val('').attr('place-holder','Enter Captcha - Case Sensitive');
      CreateCaptcha();
      $('#WrongCaptchaError').fadeOut(100);    $('#SuccessMessage').fadeIn(500).css('display','block').delay(5000).fadeOut(250);
    }  }   }
</script>
</body>
</html>

Explanation:

In the above example, we created an example of jquery captcha widget. In this we entered a captcha in the form and the form was submitted.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}	
header { 
  background-color: #fff; 
  padding: 5px 15px 0px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}
h1 {
  font-size: 28px; 
  font-weight: 700; 
  margin: 0px; 
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
  line-height: 1;  
  padding: 10;  
  color: red;  	
  letter-spacing: 1px;  
  text-align: center;  
}
h2 { font-size : 16px; font-weight: 300; margin-top: 5px; line-height: 22px; }
h2 > * { display: inline-block; vertical-align: top; }
$white: #ffffff;
$grey: #353535;
$dark_grey: #1F2124;
$blue: #2F8BE6;
$green: #1DE9B6;
$base: 1rem;
$font_family: 'Dosis', sans-serif;
$giphy_blue: #0cf;
$giphy_pink: #e54cb5;
$giphy_purple: #93f;
$giphy_red: #fc6669;
$giphy_green: #0f9;
%formElementDefault {
font-family: $font_family;
font-size: $base;
letter-spacing: 0.05em;
box-sizing: border-box;
outline: 0;
border-radius: 2px;
}
%input {
@extend %formElementDefault;
background: rgba($dark_grey, .5);
border: 1px solid rgba($white, .1);
color: white;
padding: 10px 8px 0;
}
%input-white {
@extend %input;
background: $white;
color: $grey;
border: none;
}
.spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
  transform: scale(0.5);
  > div {
width: 18px;
height: 18px;
background-color: $white;
border-radius: 100%;
display: inline-block;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }
  .bounce1 {
  animation-delay: -0.32s;
  }
  .bounce2 {
  animation-delay: -0.16s;
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0);
  } 40% { 
    transform: scale(1.0);
  }
}
* {
margin: 0;
padding: 0;
}
body {
background: $grey;
font-size: 16px;
text-transform: uppercase;
font-family: $font_family;
color: $white;
font-weight: 200;
letter-spacing: 0.11em;
}
a {
color: $blue;
}
img {
  max-width: 100%;
}
h1 {
font-weight: 200;
text-align: center;
margin-bottom: 20px;;
font-size: $base * 2.5;
letter-spacing: 0.05em;
>span {
font-weight: 400;
}
.blue {
color: $giphy_blue;
}
.pink {
color: $giphy_pink;
}
.red {
color: $giphy_red;
}
.green {
color: $giphy_green;
}
.purple {
color: $giphy_purple;
}
}
.container {
max-width:600px;
margin: 50px auto 0;
}
form {
width:400px;
margin: 0 auto;
color: $white;
.formDiv {
position: relative;
margin-bottom: 20px;
.label {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
opacity: .3;
z-index: 2;
transition: all .5s ease;
}
input {
@extend %input;
position: relative; 
z-index: 3;
&[type="text"] {
width: 100%;
height: 60px;
box-shadow: inset 0 0 10px 1px rgba(#000, 0);
transition: all .5s ease;
&:focus {
box-shadow: inset 0 0 10px 2px rgba(#000, .3);
}
&:focus ~ .label {
top: 15px;
font-size: 10px;
opacity: .8;
z-index: 4; }
&:valid ~ .label {
top: 15px;
font-size: 10px;
opacity: .8;
z-index: 4; }  
&[type="checkbox"]{
visibility: hidden; } }
.checkboxDiv {
position: relative;
.checkbox,
> span {
display: inline-block;
vertical-align: middle;
}
.checkbox {
width: 24px;
height: 24px;
position: relative;
margin-right: 5px;
label {
@extend %input;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .5s ease; }
input[type="checkbox"]:checked ~ label {					
box-shadow: inset 0 0 3px 2px rgba(#000, .3);
&:after {
content: "\f00c";
font family: FontAwesome;
font-size: $base * 0.75;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
} }
} } }	
.captchaDiv {
overflow-y: hidden;
max-height: 800px;	
transition: all .8s ease;
&.close {
max-height: 0;
}
#giphy_captcha {
background: $dark_grey;
text-align: center;
border-radius: 2px 2px 0 0;
transition:  all .3s linear;
}
input[type="text"]{
@extend %input-white;
padding-top: 0;
margin-bottom: 10px;
width: 100%;
height: 50px;
}
span {
display: block;
text-transform: initial;
margin-bottom: 20px; }
}
.formData {
position: relative;		
&.disabled {
&:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba($grey, .6);	
z-index: 10;
}	
} }
button {
@extend %formElementDefault;
width: 100%;
height: 60px;
text-align: center;
background: $blue;
color: $white;
border: none;
text-transform: uppercase;
cursor: pointer;
transition: all .3s linear;
.spinner { display: none;
}
&:hover {
background: darken($blue, 10%);
}
&:disabled {
background: $green;
cursor: default;
}
}
</style>
<body>
<body>
    <div class="container">
 <h1>
 <span class="blue">E</span>
    <span class="red">X</span>
    <span class="purple">A</span>
    <span class="green">P</span>
    <span class="pink">L</span>
<span class="blue">E</span>
 <small> Jquery Captcha Plugin </small>
</h1>
<form>
	 <div class="formData">
	<div class="formDiv">
	<input type="text" required>
<label class="label">Your Name</label>
 </div>			       
 <div class="formDiv">			        
<input type="text" required>
<label class="label">Email</label>
 </div>
<div class="formDiv">
<div class="checkboxDiv">				        	
<div class="checkbox">					        
<input type="checkbox" id="checkForRobot">					    <label for="checkForRobot"></label>
</div>				 
<span>I'm not a robot.</span>
  </div>  </div>
   <div class="captchaDiv close">			        	
<div id="giphy_captcha"></div>			        	
<input type="text" placeholder="What are you seeing? (e.g. cat, dog,  funny)" id="captcha_input" required>
<span>*Describe what you see in the above GIF to prove you're HUMAN. <a href="#" id="reload">Too difficult? Reload GIF</a></span>
        </div> </div>
 <button id="submit">		        	
<span class="text">Submit</span>		        	
<div class="spinner">
<div class="bounce1"></div>						
<div class="bounce2"></div>						
<div class="bounce3"></div>					
</div>		      
  </button> </form> 
</div>
        <script src="js/main.js"> </script>
    </body>
<script>
var API_KEY = 'dc6zaTOxFJmzC'; 
var URL = 'https://api.giphy.com/v1/gifs/search?api_key='+API_KEY;
var loaded = false;
var formData = {
q: 'monkeys cats dogs birds',
limit: 1,
rating: 'pg',
};
var counter = 0;
var currentSlug = null;
$(document).ready(function() {
$('#checkForRobot').change(function() {
if($(this).is(':checked')) {			
if(!loaded) {
$.ajax({
url: URL,
data: formData,
dataType: 'json',
success: function(data) {
console.log(data, data.data[0].images.downsized.url);
var dataObj = data.data[0];
var imgObj = dataObj.images.downsized;
var imgSrc = imgObj.url;
var imgWidth = imgObj.width;
var imgHeight = imgObj.height;						
$('<img src="'+imgSrc+'" width="'+imgWidth+'" height="'+imgHeight+'">').appendTo('#giphy_captcha');
$('.captchaDiv').toggleClass('close');
currentSlug = dataObj.slug;
},
error: function(error) {
 console.log(error);
},
complete: function() {
loaded = true;
} });
} else {
$('.captchaDiv').toggleClass('close');
}			
} else {
$('.captchaDiv').toggleClass('close');
}
});	
$('#reload').click(function() {
counter++;
if(loaded) {			
if(counter > 0) {
formData['offset'] = counter;
}
$.ajax({
url: URL,
data: formData dataType: 'json',
beforeSend: function() {
$('#giphy_captcha').height($('#giphy_captcha img').height());
$('#giphy_captcha img').remove(); },
success: function(data) {
console.log(data, data.data[0].images.downsized.url);
var dataObj = data.data[0];
var imgObj = dataObj.images.downsized;
var imgSrc = imgObj.url;
var imgWidth = imgObj.width;
var imgHeight = imgObj.height;
$('#giphy_captcha').height(imgHeight);
$('<img src="'+imgSrc+'" width="'+imgWidth+'" height="'+imgHeight+'">').appendTo('#giphy_captcha');
currentSlug = dataObj.slug; },
error: function(error) {
console.log(error);
}
});
}
return false;
});	
$('#submit').click(function(e) {
var btn = $(this),
spinner = btn.children('.spinner'),
text = btn.children('.text');
if($("form")[0].checkValidity()){
e.preventDefault();
text.hide(0);
spinner.fadeIn();			
var captcha_field = $('#captcha_input').val();
	var formatedCurrentSlug = currentSlug != null ? currentSlug.replace(/-/g, ' ') : null;
if(formatedCurrentSlug.indexOf(captcha_field) > -1){
console.log('validated!');
spinner.fadeOut(300, function() {
text.html('Succcess!!!').show(0);
btn.prop('disabled', true);
$('.captchaDiv').toggleClass('close');
$('.formData').addClass('disabled');
});
} else { spinner.fadeOut(300, function() {
text.html('Try Again :(').show(0); });				
} }
});
});
</script>
</body>
</html>

Explanation:

In the above example, we created an example of jquery captcha widget. In this we click on a checkbox in the form and the form was submitted.

Output:

Following is the output of this example.

Example 3:

<! DOCTYPE html>    
<html>    	
    <head>    		
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}
body {
  display: flex;
  flex-wrap: wrap;
  justify-

Explanation:

In the above example, we created an example of math jquery captcha widget. In this we solved a math equation in the form and the form was submitted.

Output:

Following is the output of this example.

Next TopicJquery Search Slide out Plugin

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}