Captcha Creation and Validation using JavaScript

 In this article, we can Create a captcha and validate the captcha. To achieve this we used javascript.

The demo video is given below

In Head Section

link bootstrap.min.css

In Body Section

<div class="container">

        <div class="row" style="margin-top:12px;">

            <div class="col-md-3">

                <div id="captcha"></div>

            </div>

            <a href="#" class="btn btn-primary" onclick="createCaptcha()">Reload Captcha</a>

        </div>

        <div class="row">

            <div class="col-md-3">

                <input type="text" class="form-control" id="txtCapcha" name="captcha" autocomplete="off" required>

                <div id="errorMsg" style="color: #ffbaba;"></div>

            </div>

            <button type="submit" class="btn btn-primary" onclick="return validateCaptcha()">Submit Form</button>

        </div>

    </div>

Script

<script>

        window.onload = function () {

            createCaptcha();

        };

        var code;

        function createCaptcha() {

            document.getElementById('captcha').innerHTML = '';

            document.getElementById('errorMsg').innerHTML = '';

            var charsArray = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!#$%^&*';

            var len = 4;

            var captcha = [];

            for (var i = 0; i < len; i++) {

                var index = Math.floor(Math.random() * charsArray.length + 1);

                if (captcha.indexOf(charsArray[index]) == -1) {

                    captcha.push(charsArray[index]);

                }

                else {

                    i--;

                }

            }

            var canv = document.createElement('canvas');

            canv.id = 'captcha';

            canv.width = 162;

            canv.height = 50;

            var ctx = canv.getContext('2d');

            ctx.font = 'bold 25px Apple Chancery, Georgia';

            var grd = ctx.createLinearGradient(0, 0, 200, 0);

            grd.addColorStop(0, 'red');

            ctx.fillStyle = grd;

            ctx.fillText(captcha.join(''), 0, 30);

            code = captcha.join('');

            document.getElementById('captcha').appendChild(canv);

        }

        function validateCaptcha() {

            document.getElementById('errorMsg').innerHTML = '';

            if (document.getElementById('txtCapcha').value != code || document.getElementById('txtCapcha').value == '') {

                createCaptcha();

                document.getElementById('errorMsg').innerHTML += '<span style="padding: 13px 25px 25px 0px;">Invalid Captcha</span> ';

                return false;

            }

            else if (document.getElementById('txtCapcha').value == code) {

                alert('Form Submitted !');

                return true;

            }

        }

    </script>