Captcha Using JavaScript:
Now a days most of the forms in websites, whenever we register we can see Captcha is becoming mandatory to check whether it is an user or some automated software. CAPTCHA stands for – Completely Automated Public Turing Test To Tell Computers and Humans Apart. As the name suggests it helps to differentiate automated software vs human beings.
In this article, Let us see how can we create a Captcha using JavaScript, Display random text to the user and validate the Captcha. In this example, I have created only checking and validating captcha, which can be included in the forms.
<html>
<head>
<title>Captcha Forms</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function captchaGenerate(){
var strings = (Math.random()+1).toString(36).substring(2,7);
document.getElementById("captchaString").value = strings;
}
function validate(){
var userString = document.getElementById("userString").value;
var captchaString = document.getElementById("captchaString").value;
if(userString === captchaString){
alert("Success");
}
else{
alert("failure");
}
}
</script>
</head>
<body onload="captchaGenerate()">
<table>
<tr>
<th>Captcha</th>
<th> <input type="text" id="captchaString"></th>
<th> <button type="button" onclick="captchaGenerate()">Refresh</button></th>
</tr>
<tr>
<th>Enter above text</th>
<td><input type="text" id="userString"> </td>
<td></td>
</tr>
<tr>
<td></td>
<td><button type="submit" onclick="validate()">Check</button></td>
<td></td>
</tr>
</table>
</body>
</html>
