Home Web Development JavaScript jQuery Captcha Program With CSS | JavaScript ReCaptcha Verification

jQuery Captcha Program With CSS | JavaScript ReCaptcha Verification

November 7, 2019

7822

How we can create a captcha program using JavaScript, HTML, and CSS? Solution: See this jQuery Captcha Program With CSS, JavaScript ReChaptcha Verification.

Previously I have shared many form related programs, in the form section we use captcha verification to avoid spam. Basically, A CAPTCHA is a type of test to detect the user is a human or robot. There are many ReCaptcha services you can use on your website for protecting from spammers. But we can also create our own ReCaptcha program as well.

Today you will learn to create JavaScript ReChaptcha Verification Function. Basically, there is a text input field, a section for showing code, refresh or regenerate code, and a submit button. When you will put incorrect code, then there will show a message for telling you this is an invalid code. Otherwise, it will show the code is correct. If you put an incorrect code, then with a message a new code will generate.

So, I am sharing jQuery Captcha Program With CSS. For creating this program I have used jQuery, if we use pure JavaScript then it will very complicated and take a long time to create. jQuery generating code and storing it in variables, then when the user puts the code it checks and verifies.

If you are thinking now how this captcha program actually is, then see the preview given below.

Preview Of JavaScript ReCaptcha

See this video preview to getting an idea of how this ReCaptcha program looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

jQuery Captcha Program Source Code

Before sharing sour code, let’s talk about it. First, I have created the layout by creating an input field for putting code, a refresh button, and div for showing the code and a submit button. And in the HTML elements, I have placed class and ID names for styling, functioning. Also In the submit and refresh button, I have placed the JavaScript function names onClick (info).

Now using CSS I have placed all the elements in the right place, as you can see in the preview. In the refresh button and code section, I have placed images. With CSS I have done all the styling like color, position, margin, padding, etc. And also in the CSS file, I have linked two google fonts using CSS @import command.

As you know this program is based on jQuery and the main function is based on it. I have declared all the characters, which we have to use while generating code. Now I have put capital and small alphabets and 0 to 9 numbers in an array. The whole array stored in a variable and created a for loop for generating code. After that, I have created 6 more variables inside the loop for creating 6 digit code.

And many more things I have done using jQuery like check code, and show the massage, etc. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JavaScript Captcha Program | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<section>
  <fieldset class="captchaField">
    <span id="SuccessMessage" class="success">Thanks! , The Captcha Is Correct!</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(); Submit();" value="Submit">
  </fieldset>
</section>
          
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Captcha Program | Webdevtrick.com</title>

</head>

<body>

<span id="SuccessMessage" class="success">Thanks! , The Captcha Is Correct!</span>

</div>

</div>

</fieldset>

</section>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com )*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100);
body {
  background-color: lightgray;
}
.captchaField { 
  margin: 0 auto;
  margin-top: 15%;
  border: 1px solid #ccc; 
  padding: 15px;
  width: 345px;
  background-color: #fff;
  border-radius: 5px;
}
.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://webdevtrick.com/wp-content/uploads/recaptcha.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;
}

/* Code By Webdevtrick ( https://webdevtrick.com )*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700);

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100);

body {

background-color: lightgray;

}

.captchaField {

margin: 0 auto;

margin-top: 15%;

border: 1px solid #ccc;

padding: 15px;

width: 345px;

background-color: #fff;

border-radius: 5px;

}

.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://webdevtrick.com/wp-content/uploads/recaptcha.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;

}

function.js

The last step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
var cd;
var IsAllowed = false;
$(document).ready(function() {
    CreateCaptcha();
});

// Create Captcha
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://webdevtrick.com/wp-content/uploads/captchaback.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 = '#212121';
      ctx.textAlign = 'center';
      ctx.setTransform (1, -0.12, 0, 1, 0, 15);
      ctx.fillText(cd,x,55);
  };
}

// Validate Captcha
function ValidateCaptcha() {
  var string1 = removeSpaces(cd);
  var string2 = removeSpaces($('#UserCaptchaCode').val());
  if (string1 == string2) {
    return true;
  }
  else {
    return false;
  }
}

// Remove Spaces
function removeSpaces(string) {
  return string.split(' ').join('');
}

// Check Captcha
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) { 
      IsAllowed = false;
      $('#WrongCaptchaError').text('Invalid Captcha! Please Try Again.').show();
      CreateCaptcha();
      $('#UserCaptchaCode').focus().select();
    }
    else { 
      IsAllowed = true;
      $('#UserCaptchaCode').val('').attr('place-holder','Enter Captcha - Case Sensitive');
      CreateCaptcha();
      $('#WrongCaptchaError').fadeOut(100);
      $('#SuccessMessage').fadeIn(500).css('display','block').delay(5000).fadeOut(250);
    }
  }  
}

// Code By Webdevtrick ( https://webdevtrick.com )

var cd;

var IsAllowed = false;

$(document).ready(function() {

CreateCaptcha();

});

// Create Captcha

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://webdevtrick.com/wp-content/uploads/captchaback.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 = '#212121';

ctx.textAlign = 'center';

ctx.setTransform (1, -0.12, 0, 1, 0, 15);

ctx.fillText(cd,x,55);

};

}

// Validate Captcha

function ValidateCaptcha() {

var string1 = removeSpaces(cd);

var string2 = removeSpaces($('#UserCaptchaCode').val());

if (string1 == string2) {

return true;

}

else {

return false;

}

// Remove Spaces

function removeSpaces(string) {

return string.split(' ').join('');

}

// Check Captcha

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) {

IsAllowed = false;

$('#WrongCaptchaError').text('Invalid Captcha! Please Try Again.').show();

CreateCaptcha();

$('#UserCaptchaCode').focus().select();

}

else {

IsAllowed = true;

$('#UserCaptchaCode').val('').attr('place-holder','Enter Captcha - Case Sensitive');

CreateCaptcha();

$('#WrongCaptchaError').fadeOut(100);

$('#SuccessMessage').fadeIn(500).css('display','block').delay(5000).fadeOut(250);

}

That’s It. Now you have successfully created jQuery Captcha Program With CSS, JavaScript ReCaptcha Verification. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

2 COMMENTS

Avinash November 8, 2019 At 1:21 am

Hi Shaan, can you please develop on quiz

Reply
- shaan November 8, 2019 At 2:20 am
  
  https://webdevtrick.com/create-javascript-quiz-program/
  
  Reply

jQuery Captcha Program With CSS | JavaScript ReCaptcha Verification

Preview Of JavaScript ReCaptcha

jQuery Captcha Program Source Code

2 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY