Create Captcha Code in HTML and Javascript

Create Captcha Code in HTML and Javascript

The logic of captcha code in HTML and Javascript

  • First of all, we will call a function with the javascript onclick event handler to the input captcha field to generate the 4-digit random captcha code. The captcha code will load automatically when the page opens. Each time a captcha will be generated after clicking the refresh button.
  • Now, we will use the javascript onsubmit event handler to the HTML form to validate the captcha. Suppose if a user hits the submit button without entering the captcha code then the function within the submit event handler will return false i.e. it prevents the HTML form to submit and an error message will be shown to the user.
  • If you enter the wrong captcha then you will receive an error message otherwise you will receive a success alert for the correct captcha.
// Disable right click on web page
$("html").on("contextmenu",function(e){
return false;
});
// Disable cut, copy and paste on web page
$('html').bind('cut copy paste', function (e) {
e.preventDefault();
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Captcha Code</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body onload="generateCaptcha(event);">
<div class="container mt-3" style="width:50%;">
<h2>Captcha Code in HTML and Javascript</h2>
<form action="/action_page.php" method="post" onsubmit="return validateForm()" name="myForm">
<div class="mb-3 mt-3">
<label for="email" class="fw-bold">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="fw-bold">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="mb-3">
<label for="pwd" class="fw-bold">Captcha:</label>
<div class="row">
<div class="col-sm-10">
<input type="text" name="maincaptcha" readonly class="form-control" id="mainCaptcha"/>
</div>
<div class="col-sm-2">
<button class="btn btn-success btn-sm" onclick="generateCaptcha(event);" id="refresh"><i class="fa fa-refresh" style="font-size:17px"></i></button>
</div>
</div>
</div>
<div class="mb-3">
<label for="pwd" class="fw-bold">Enter Captcha:</label>
<div class="row">
<div class="col-sm-10">
<input type="text" name="checkcaptcha" class="form-control" id="txtInput"/>
</div>
</div>
</div>
<div class="mb-3">
<span id="error" style="color:red;"></span>
<span id="success" style="color:green;"></span>
</div>
<button type="submit" class="btn btn-primary btn-sm">Submit</button>
</form>
</div>
<script type="text/javascript">
//for captcha
function generateCaptcha(event)
{
event.preventDefault();
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');
var i;
for (i=0;i<4;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 code = a + '' + b + '' + '' + c + '' + d;
document.getElementById("mainCaptcha").value = code
var el = document.getElementById('mainCaptcha');
el.style.fontFamily = 'Geneva, Verdana, sans-serif';
el.style.fontSize = 'large';
}
//validate the form
function validateForm() {
let x = document.forms["myForm"]["checkcaptcha"].value;
let y = document.forms["myForm"]["maincaptcha"].value;

if (x == "") {
document.getElementById('error').innerHTML = "Please enter the captcha.";

return false;
}
if(x!==y){
document.getElementById('error').innerHTML = "Captcha does not match.";

return false;
}
if(x===y){
document.getElementById('error').innerHTML = "";
alert("Captcha entered successfully");
return true;
}
}
// automatically generate captcha after page laod
$(window).on('load', function () {
generateCaptcha(event);
});
// Disable right click on web page
$("html").on("contextmenu",function(e){
return false;
});
// Disable cut, copy and paste on web page
$('html').bind('cut copy paste', function (e) {
e.preventDefault();
});
</script>
</body>
</html>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bipsmedium

Bipsmedium

25 Followers

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.