Captcha Validation using Javascript is a typical web element that helps make the website more secure. Custom Captcha is used primarily in log-in forms, registration forms or contact forms.
This article I’ve explained how to make simple Captcha Validation with JavaScript. This is where you can find the HTML code for captchas for free. You will be provided with a step-by step guide.
JavaScript Captcha Validation
Captcha Validation protects the website from spammers. It can be used to identify bots and robots. As an expert in programming, you are aware that spamming a website could easily be achieved by using loops in various programming languages.
You are essentially making a contact form to ensure users can send messages by hand. With programming languages, automated messaging is possible at a specific date and time. Validation of Captcha JavaScript is utilized to block this type of spam.
See the Pen Untitled by Shantanu Jana (@shantanu-jana) on CodePen.
In the scenario of Captcha Validation it is basically two boxes and the button. A box can contain pictures or even a code for a captcha. You must enter the code in another box, by studying the characters. If you enter incorrectly the message won’t be delivered.
Custom Captcha in HTML CSS & JavaScript
If you are looking to design such a Custom Captcha by using JavaScript you can follow this instructions below. Html CSS as well as JavaScript were used for the Simple Captcha Validation.
It is basically a screen in which random Captcha codes can be observed. Another input box that allows you to enter to input the Captcha code. There is an option to submit that will send your input to Captcha.
Step 1: Structure of Custom Captcha
The fundamental design that is used in Captcha Validation has been created with the help of this code. A box was created here on the website.
This project (Custom Captcha in JavaScript) has width: 400px, height: 200px and background color white.
<body onload="Captcha();">
<div class="capt">
</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.
<h2 type="text" id="mainCaptcha"></h2>
#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.
<p><input type="button" id="refresh" onclick="Captcha();"/></p>
#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.
<input type="text" id="txtInput"/>
#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.
<input id="Button1" type="button" value="Check" onclick="alert(ValidateCaptcha());"/>
#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('');
}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. Let me know how you like this Javascript Captcha Validation by commenting.