Post
Ask Question

Generate CAPTCHA using JQuery

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

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

Simple client side code snippet for CAPTCHA

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Sample Captcha</title>  
  5. <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>  
  6. <script>  
  7.         $(document).ready(function () {  
  8.             $("#btnGetCaptcha").prop("disabled", true);  
  9. Var iNumber = Math.floor(Math.random() * 10000);  
  10.             $("#divGenerateRandomValues").css({ "background-image": 'url(../img/captcha.png)', 'width': '100px', 'height': '50px' });  
  11.             $("#divGenerateRandomValues").html("<input id='txtNewInput'></input>");  
  12.             $("#txtNewInput").css({ 'background': 'transparent', 'font-family': 'Arial', 'font-style': 'bold', 'font-size': '40px' });  
  13.             $("#txtNewInput").css({ 'width': '100px', 'border': 'none', 'color': 'black' });  
  14.             $("#txtNewInput").val(iNumber);  
  15.             $("#txtNewInput").prop('disabled', true);  
  16.   
  17.             $("#btnGetCaptcha").click(function () {  
  18. if ($("#textInput").val() != iNumber) {  
  19. alert("Wrong Input!");  
  20.                 }  
  21. else {  
  22. alert("Correct Input!!!");  
  23.                 }  
  24.             });  
  25. Var  wrongInput = function () {  
  26. if ($("#textInput").val() != iNumber) {  
  27. returntrue;  
  28.                 }  
  29. else {  
  30. returnfalse;  
  31.                 }  
  32.             };  
  33.             $("#textInput").bind('input', function () {                  
  34.                 $("#btnGetCaptcha").prop('disabled', wrongInput);  
  35.             });  
  36.         });  
  37. </script>  
  38. </head>  
  39. <body>  
  40. <div id="divGenerateRandomValues"></div>  
  41. <input type="text" id="textInput"/>  
  42. <button id="btnGetCaptcha">Submit</button>  
  43. </body>  
  44. </html>  
Output

When page loads,

Output

If we give correct input then the output as below,

 

Output