Create a CAPTCHA using JavaScript

CAPTCHA determines whether the user is and automated. It's provides stretch letters and numbers.It's blocks automated systems.Only human can determine which symbols they are. The following example show, how to generate CAPTCHA using JavaScript.

Demo

Example

<html>
  <body onload='generateCaptcha()'>
    <div id="captchaImage"></div>
    <input type="text" placeholder="Enter Captcha" id="txtCaptcha"/>
    <button type="button" onclick='validation()'>Validate</button>
    <p id='result'></p>
  </body>
  <script>
    var captchaValue;
    function generateCaptcha() {
      document.querySelector('#captchaImage').innerHTML = "";
      var characters ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      var captchaLenfth = 6;
      var captcha = [];
      for (var i = 0; i < captchaLenfth; i++) {
        var randomIndex = Math.floor(Math.random()*characters.length+1); 
        if (captcha.indexOf(characters[randomIndex]) == -1){
          captcha.push(characters[randomIndex]);
        }else{
          i--;
        }
      }
      var canvas = document.createElement("canvas");
      canvas.id = "captcha";
      canvas.width = 120;
      canvas.height = 60;
      var context = canvas.getContext("2d");
      context.font = "30px Forte";
      context.strokeText(captcha.join(""), 0, 30);
      captchaValue = captcha.join("");
      document.getElementById("captchaImage").appendChild(canvas); 
    }
    function validation() {
      event.preventDefault();
      if (document.querySelector("#txtCaptcha").value == captchaValue) {
        document.querySelector("#result").innerText='Valid Captcha';
      }else{
        document.querySelector("#result").innerText='Invalid Captcha.Try Again!!!';
        generateCaptcha();
      }
    }
  </script>
</html>

Try it Yourself

Others

Others

Create a CAPTCHA using JavaScript

Demo