Simple Captcha Validation Using HTML CSS JavaScript

Javascript captcha validation is a common web element that makes a website more secure. Custom Captcha is mainly used in the login forms, registration forms, and contact forms.

In this article, I have shown how to create Simple Captcha Validation using JavaScript. Here you will find the captcha HTML code for free. With it, you will get step by step tutorial.

JavaScript CAPTCHA Validation

Captcha Validation protects the website from spammers. It is used to identify robots or bots. Since you are a programmer, you know that spamming a website can easily be done using loops of different program languages.

Like you are creating a contact form so that the user can message manually. However, using a programming language, automatic messaging can be done at a certain time. Captcha Validation JavaScript is used to prevent this type of spam.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

In the case of Captcha Validation, basically from two boxes and a button. A box will contain some pictures or some captcha code. You have to input in another box by looking at those characters. If you input incorrectly, your message will not be sent.

Create Custom Captcha in HTML CSS & JavaScript

If you want to create this Custom Captcha using JavaScript then follow the tutorial below. Html, CSS, and javascript have been used to create this Simple Captcha Validation.

There is basically a display where random Captcha code can be seen. There is another input box to input the Captcha code. It has a submit button that will submit your input Captcha.

Step 1: Basic structure of Custom Captcha

The basic structure of Captcha Validation has been created using the following code. A box has been created here on the webpage.

This project (Custom Captcha in JavaScript) has width: 400px, height: 200px and background color white.

</div>

</body>

body{

background-color: rgb(7, 112, 209);

font-family: sans-serif;

}

.capt{

background-color:#ffffff;

width: 400px;

height:200px;

border-radius: 5px;

position: absolute;

transform: translate(-50%,-50%);

top: 50%;

left: 50%;

}

Step 2: Captcha code viewing display

Now it is time to create a display in which you can see the captcha code. Captcha code will be created randomly in that display.

#mainCaptcha{

position: relative;

max-width: 350px;

margin: auto;

margin: 20px;

padding: 10px;

text-align: center;

box-shadow: 0 0 20px rgba(0,139,253,0.25);

}

Step 3: Button to view the new Captcha code

Now a refresh button has been created in Captcha Validation. Each time you click on that refresh button, a different Captcha Validation Code will be generated.

#refresh{

position:relative;

left:300px;

width:30px;

height:50px;

bottom:55px;

background-color: transparent;

outline: none;

background-image: url(‘https://img.icons8.com/android/24/000000/refresh.png’);

border : 0;

background-repeat: no-repeat;

}

Step 4: Create a Captcha text input box

Now an input box has been created to input the captcha codes in the display. The size of the input box is also determined by padding: 10px 10px.

#txtInput, #Button1{

position: relative;

left:40px;

padding: 10px 10px;

bottom: 40px;

font-size: 18px;

}

#txtInput{

border: 2px solid rgb(4, 82, 160);

}

Step 5: Create a submit button

You need to create a submit button here. After inputting Security Code, you can validate Captcha with this button.

#Button1{

background-color: rgb(7, 59, 115);

border-color: rgb(7, 59, 115);

color: #fff;

}

Step 6: Activate Custom Captcha using JavaScript

Now you need to activate this client-side captcha validation by JavaScript. Here a random captcha code will be created by that character using Math.random ().

Then using innerHTML it is arranged to show in the result box. JavaScript alert () method has been used here. A virtual window is created by the alert () method to display validation information.

//Create a function

function Captcha(){

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

//Math. random() function returns a floating-point in the range 0 to less than 1

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)];

var g = alpha[Math.floor(Math.random() * alpha.length)];

}

var code = a + ‘ ‘ + b + ‘ ‘ + ‘ ‘ + c + ‘ ‘ + d + ‘ ‘ + e + ‘ ‘+ f + ‘ ‘ + g;

//innerHTML property is part of the Document Object Model

document.getElementById(“mainCaptcha”).innerHTML = code

document.getElementById(“mainCaptcha”).value = code

}

//Create a function

function ValidateCaptcha(){

var string1 = removeSpaces(document.getElementById(‘mainCaptcha’).value);

var string2 = removeSpaces(document.getElementById(‘txtInput’).value);

if (string1 == string2){

return true;

}else{

return false;

}

function removeSpaces(string){

return string.split(‘ ‘).join(”);

}

Captcha HTML Code Free

Hopefully, you know how to do JavaScript Captcha Creation and Validation. This type of client-side validation can be easily used between different elements of your webpage.

I have just created a tutorial on how to add a Custom Captcha to the login form. From this design, you can learn how to apply this project (Captcha in JavaScript).