How to create simple javascript/jquery client side captcha?

here you are ;)

var captchaText;
$(function() {
  var pre = $('#captcha');
  captchaText = pre.text();
  pre.text('');

  var lines = ['', '', '', '', '']
  for (var ixLetter = 0; ixLetter < captchaText.length; ixLetter++) {
    var letter = captchaText.substr(ixLetter, 1);

    var letterLines = letters[letter];
    for (var ix = 0; ix < 5; ix++) {
      lines[ix] = lines[ix] + '  ' + letterLines[ix];
    }
  }
  for (var ix = 0; ix < 5; ix++) {
    pre.append(lines[ix] + '\n');
  }
});

function check() {
  if ($('#captchaCheck').val() == captchaText) {
    alert('you are probably human');
  } else {
    alert('you probably made a mistake. Don\'t worry. To err is also human.');
  }
}
var letters = {
  h: [
    'HH  HH',
    'HH  HH',
    'HHHHHH',
    'HH  HH',
    'HH  HH'
  ],
  i: [
    'II',
    'II',
    'II',
    'II',
    'II'
  ]
  // etc
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<pre id="captcha">hi</pre> Please type what you see: <input id="captchaCheck" /> <input type="button" value="Check" onclick="check()" />

Why don't you use reCAPTCHA ? It's free, very efficient, and provides accessibility functionnalities.


It can be done with HTML and a simple JavaScript code. Have a look at this:

 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++){
         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;
         document.getElementById("mainCaptcha").innerHTML = code
		 document.getElementById("mainCaptcha").value = code
       }
function ValidCaptcha(){
     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('');
}
.capt{
	background-color:grey;
	width: 300px;
	height:100px;
	
}

#mainCaptcha{
	position: relative;
	left : 60px;
	top: 5px;
	
}

#refresh{
	position:relative;
	left:230px;
	width:30px;
	height:30px;
	bottom:45px;
	background-image: url(rpt.jpg);
}

#txtInput, #Button1{
	position: relative;
	left:40px;
	bottom: 40px;
}
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="script.js"></script>    
<body onload="Captcha();"> 
   <div class="capt"> 
   <h2 type="text" id="mainCaptcha"></h2>
   <p><input type="button" id="refresh" onclick="Captcha();"/></p>            <input type="text" id="txtInput"/>    
   <input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>
   </div>
</body>

Tags:

Javascript

Jquery

Recent Posts