Generate CAPTCHA using JQuery

Blog

Captcha saves you from spam by producing a randomly generated sequence of letters and/or numbers that you have to type into the textbox to test and prove your human identity.

Why do we use CAPTCHA?

It is one simple gateway to ensure your data is safe. Nowadays you can find use of CAPTCHA in many websites like Google, banking sites, and payment gateways etc. to help prevent unauthorized entry and to provide access to sensitive information such as credit card or bank accounts.

Advantages

Prevents unauthorized entry
Validated safe and secure for sensitive information
Reduces spam and viruses
Strengthen the security etc.

Simple client side code snippet for CAPTCHA

<!DOCTYPE html>
<html>
<head>
<title>Sample Captcha</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function () {
$("#btnGetCaptcha").prop("disabled", true);
Var iNumber = Math.floor(Math.random() * 10000);
$("#divGenerateRandomValues").css({ "background-image": 'url(../img/captcha.png)', 'width': '100px', 'height': '50px' });
$("#divGenerateRandomValues").html("<input id='txtNewInput'></input>");
$("#txtNewInput").css({ 'background': 'transparent', 'font-family': 'Arial', 'font-style': 'bold', 'font-size': '40px' });
$("#txtNewInput").css({ 'width': '100px', 'border': 'none', 'color': 'black' });
$("#txtNewInput").val(iNumber);
$("#txtNewInput").prop('disabled', true);
$("#btnGetCaptcha").click(function () {
if ($("#textInput").val() != iNumber) {
alert("Wrong Input!");
}
else {
alert("Correct Input!!!");
}
});
Var wrongInput = function () {
if ($("#textInput").val() != iNumber) {
returntrue;
}
else {
returnfalse;
}
};
$("#textInput").bind('input', function () {
$("#btnGetCaptcha").prop('disabled', wrongInput);
});
});
</script>
</head>
<body>
<div id="divGenerateRandomValues"></div>
<input type="text" id="textInput"/>
<button id="btnGetCaptcha">Submit</button>
</body>
</html>