JavaScript CAPTCHA Validator

Live stream set for 2025-06-03 at 14:00:00 Eastern

Ask questions in the live chat about any programming or lifestyle topic.

This livestream will be on YouTube or you can watch below.

Validation Form

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) involves challenges such as identifying distorted text or selecting images.

The CAPTCHA is used on web forms to prevent spam, malicious bots and other automated attacks.

A CAPTCHA presents a challenge that is relatively easy for humans to complete but difficult for bots to replicate.

In this tutorial, the text-based CAPTCHA will be generated that users must type in the input box.

Requirements For Text CAPTCHA

Glossary:

Invariant Recognition

Ability to recognize letters despite a large amount of variation in their shapes.

Segmentation

Ability to separate one letter from another, made difficult in CAPTCHAs.

Parsing

Ability to understand the CAPTCHA holistically, in order to correctly identify each character.

Common CAPTCHA Types

CAPTCHA Types

Name	Description	Example
Text	Distorted letters or numbers that users must type in a text box.	td4eva
Image	Identifying specific objects or shapes in images.
Audio	Identifying specific objects or shapes in images.	.
math	Solving simple arithmetic equations.	1 + 2.
Name	Description	Example

HTML CAPTCHA Form

<form class="captcha-validator">
   <h3 class="middle">Form CAPTCHA Validator</h3>
   <canvas class="middle captcha"></canvas>
   <div class="middle">
      <input type="text" name="validate" placeholder="Enter Code" />
      <button type="button" class="refresh">Refresh</button>
   </div>
   <div class="captcha-buttons">
      <input type="submit" value="Submit" />
      <input type="reset" value="Reset" />
   </div>
   <output></output>
</form>
<script></script>

CSS CAPTCHA Form

.captcha-validator button,
.captcha-validator input {
   padding: 0.9rem 1.1rem;
}
.captcha-validator .middle {
   display: block;
   text-align: center;
   margin: 0 auto;
}
.captcha-validator .captcha-buttons {
   display: flex;
   justify-content: space-between;
}      
.captcha-validator .pass {
   color: green;
}
.captcha-validator .fail {
   color: red;
}

CAPTCHA Validator

(() => {
   let length = 5;
   let output = document.querySelector('form.captcha-validator output');
   let validate = document.querySelector('form.captcha-validator input[name="validate"]');
   let captcha = document.querySelector('form.captcha-validator canvas.captcha');
   let code = null;
   let gnCode = (length) => {
      let ctx = captcha.getContext('2d');
      code = Math.random().toString(36).substring(2, 2 + length);
      ctx.font = 'bold 48px serif';
      ctx.clearRect(0, 0, captcha.width, captcha.height);
      ctx.fillText(code, captcha.width/4, captcha.height/2);
      output.innerHTML = '';
   };
   let ckCode = () => {
      let val = validate.value
      if ( (val.trim().length !== 0) && (val === code) ) {
         output.innerHTML = `<em class="pass">Validated</em>`;
      } else {
         output.innerHTML = `<em class="fail">Failed</em>`;
      }
   };
   document.querySelector('form.captcha-validator button.refresh').addEventListener('click', (evt) => {
      gnCode(length);
   });
   document.querySelector('form.captcha-validator').addEventListener('submit', (evt) => {
      evt.preventDefault();
      ckCode();
   });
   gnCode(length); // Default
})();

Explanation

1. Generate a HTML form to hold elements for CAPTCHA.
2. The input text code entry will be compared to the generated code.
3. The refresh button generates a new CAPTCHA code.
4. The submit button will validate the user input.

Usage

• You may use the any IDE or text editor including the Learning JavaScript Course Web IDE in a new browser window.
• Open your web browser.
• Navigate to the URL or drag and drop the HTML file into the web browser.

Open Source

JavaScript follows the ECMAScript standard and is licensed under the W3C Software License by web browser vendors and runtime environment vendors. The permissive license requires the preservation of the copyright notice and disclaimer. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.

CSS specifications are maintained by the World Wide Web Consortium (W3C) and is licensed under the W3C Software License by web browser vendors. The permissive license requires the preservation of the copyright notice and disclaimer. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.

Conclusion:

The CAPTCHA validator tutorial was divided into parts. In this part, the HTML, CSS styling and basic JavaScript were completed. The reset button works without additional JavaScript code.

If you enjoy this article, consider supporting me by purchasing one of my OjamboShop.com Online Programming Courses or publications at Edward Ojambo Programming Books or simply donate here Ojambo.com Donate

References:

• Customer Sets Price Plugin for WooCommerce on Ojambo.com
• Learning JavaScript Course on OjamboShop.com
• Learning Python Course on OjamboShop.com
• Learning PHP Course on OjamboShop.com
• Learning JavaScript Paperback on Amazon
• Learning JavaScript Ebook on Amazon
• Learning Python Ebook on Amazon
• Learning PHP Ebook on Amazon
• OjamboServices.com For Custom Websites, Applications & Tutorials