How to Create Captcha code using JavaScript?

Today, We want to share with you captcha code in html and javascript.In this post we will show you how to validate captcha in html?, hear for Create a captcha Validation in HTML and Javascript we will give you demo and example for implement.In this post, we will learn about How To Create CAPTCHA Image Verification Using PHP And JQuery with an example.

How to Create Captcha using JavaScript?

Captcha is a technique to protect web HTML submit forms

Example 1: index.html

<!DOCTYPE html>  
<html>  
<head>  
    <title>Using JavaScript how to Create Captcha</title>  
    <script type="text/javascript">  
        /* Function to Generat Captcha */  
        function DisplayCodeForQR() {  
            var first_arg = Math.ceil(Math.random() * 10) + '';  
            var second_arg = Math.ceil(Math.random() * 10) + '';  
            var third_arg = Math.ceil(Math.random() * 10) + '';  
  
            var str = new Array(4).join().replace(/(.|$)/g, function () { return ((Math.random() * 36) | 0).toString(36)[Math.random() < .5 ? "toString" : "toUpperCase"](); });  
            var results = str + first_arg + ' ' + second_arg + ' ' + third_arg;  
            document.getElementById("userCapt").value = results  
        }  
  
        /* Validating Captcha Function */  
        function CheckValidCaptcha() {  
            var str1 = removeSpaces(document.getElementById('userCapt').value);  
            var str2 = removeSpaces(document.getElementById('txtCompare').value);  
  
            if (str1 == str2) return true;  
            return false;  
        }  
  
        /* Remove spaces from Captcha Code */  
        function removeSpaces(string) {  
            return string.split(' ').join('');  
        }  
    </script>  
  
</head>  
<body onload="DisplayCodeForQR();">  
    <div style="border: 2px solid gray; width: 700px;">  
        <h2>Generating Captcha Demo - www.pakainfo.com</h2>  
  
        Enter the Captcha Text:  
        <input type="text" id="txtCompare" />  
        <input type="text" id="userCapt" style="text-align: center; border: none; font-weight: bold; font-size: 20px; font-family: Modern" />  
        <input type="button" id="btnrefresh" value="Refresh" onclick="DisplayCodeForQR();" />  
        <input id="btnValid" type="button" value="Check" onclick="alert(CheckValidCaptcha());" />  
  
        <br />  
        <br />  
    </div>  
</body>  
</html>  

Example 2: index.html

<html>
   <head>
      <script type="text/javascript">
         function DisplayCodeForQR()
         {
             var dynamicGenratedData = 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');
             var i;
             for (i=0;i<4;i++){
               var a = dynamicGenratedData[Math.floor(Math.random() * dynamicGenratedData.length)];
               var b = dynamicGenratedData[Math.floor(Math.random() * dynamicGenratedData.length)];
               var c = dynamicGenratedData[Math.floor(Math.random() * dynamicGenratedData.length)];
               var d = dynamicGenratedData[Math.floor(Math.random() * dynamicGenratedData.length)];
              }
            var uniq_code = a + '' + b + '' + '' + c + '' + d;
            document.getElementById("setUserCpt").value = uniq_code
          }
          function ValidCaptcha(){
              var string1 = removeSpaces(document.getElementById('setUserCpt').value);
              var string2 = removeSpaces(document.getElementById('txtInput').value);
              if (string1 == string2){
         document.getElementById('success').innerHTML = "Good Luck, HTML Form is validated Successfully";
         //alert("Your Form is validated Successfully");
                return true;
              }
              else{       
         document.getElementById('error').innerHTML = "Sorry, Please enter a valid captcha."; 
         //alert("Sorry, Please enter a valid captcha.");
                return false;
         
              }
          }
          function removeSpaces(string){
            return string.split(' ').join('');
          }
      </script>    
   </head>
   <body onload="DisplayCodeForQR();">
      <center>
         <h2>Please please fill the following fields to validate. - www.pakainfo.com</h2>
         <table>
            <tr>
               <td>
               </td>
            </tr>
            <tr>
               <td>
                  <input type="text" id="setUserCpt"readonly="readonly"/> //set background image according to your choice.
                  <input type="button" id="refresh" value="Refresh" onclick="DisplayCodeForQR();" />
               </td>
            </tr>
            <tr>
               <td>
                  <input type="text" id="txtInput"/>    
               </td>
            </tr>
            <tr>
               <td>
                  <input id="Button1" type="button" value="Check" onclick="ValidCaptcha();"/>
               </td>
            </tr>
            <tr>
               <td><span id="error" style="color:red"></span></td>
            </tr>
            <tr>
               <td><span id="success" style="color:green"></span></td>
            </tr>
         </table>
      </center>
   </body>
</html>

I hope you get an idea about How to Create a text captcha using java script in html form?.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.