Simple Captcha for bootstrap form

captcha.css

/**-------------------------------------------------
 * Simple Captcha System
 * @package Code Snippets
 * @link http://rhythmshahriar.com/codes/
 * @author Rhythm Shahriar <rhy@rhythmshahriar.com>
 * @link http://rhythmshahriar.com
 * @copyright Copyright © 2017, Rhythm Shahriar
 ---------------------------------------------------*/
body {
    background-color: #2d2d2d;
    font-family: 'Lato', sans-serif;
}

a{
    color: #00B16A;
}

#captcha {
    border-top: 5px solid #F64747;
    background-color: #FFF;
    height: 100vh;
    min-height: 960px;
    max-width: 980px;
    margin: 0 auto;
}

#captcha .title {
    text-align: center;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
    padding: 30px 0;
}

#captcha .captcha-from {
    max-width: 70%;
    margin: 0 auto;
}

#captcha .captcha-from label{
    font-weight: normal;
}

#captcha .form-control{
    border-radius: 0;
}
#captcha .input-group-addon {
    border-top-left-radius: 0 ;
    border-bottom-left-radius: 0;
}

#captcha .captcha-group div{
    display: inline-block;
}

#captcha .captcha-code .code{
    width: 200px;
    height: 80px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    border: 1px solid #CCC;
}

#captcha .captcha-code .code .dynamic-code{
    text-shadow: 4px 4px 5px rgba(150, 150, 150, 1);
    color: #2d2d2;
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently */
    cursor: help;
}

#captcha .captcha-code .code .dynamic-code:first-letter{
    font-size: 48px;
}

#captcha .captcha-code .captcha-reload{
    cursor: pointer;
    font-size: 36px;
    font-weight: bold;
    margin-top: 0;
    max-width: 36px;
}

#captcha .captcha-code .captcha-reload:hover{
    color: #00B16A;
}

#captcha #captcha-input{
    max-width: 200px;
    margin-top: 15px;
}

#captcha .btn{
    border-radius:0;
}

captcha.js

/**-------------------------------------------------
 * Simple Captcha System
 * @package Code Snippets
 * @link http://rhythmshahriar.com/codes/
 * @author Rhythm Shahriar <rhy@rhythmshahriar.com>
 * @link http://rhythmshahriar.com
 * @copyright Copyright © 2017, Rhythm Shahriar
 ---------------------------------------------------*/
 
//email verification
$('#email').on('change', function () {
    if(!validateEmail($(this).val())){
        $('#errEmail').html('<span style="color: red;"><i class="ion-close"></i> Invalid email address.</span>');
        $(this).val('');
    }else {
        $('#errEmail').html('');
    }
});

//password verification
$('#cpwd').on('change', function () {
    if($(this).val() != $('#pwd').val() ){
        $('#errPwd').html('<span style="color: red;"><i class="ion-close"></i> Password not matched.</span>');
        $(this).val('');
    }else {
        $('#errPwd').html('');
    }
});


//email validation
function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

//allow only number input
function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    return (charCode > 47 && charCode < 58 || charCode == 8  || charCode == 9 || charCode == 46  || charCode >36 &&  charCode < 41);
}


//allow only number input
function isAlpha(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    return (charCode > 64 && charCode < 91 || charCode > 96 &&  charCode < 123 || charCode == 8  || charCode == 9 || charCode == 46  || charCode >36 &&  charCode < 41);
}

//generate captcha
function generateCaptcha(length, chars) {
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
    return result;
}

//default captcha
$('.dynamic-code').text(generateCaptcha(5, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));

$('.captcha-reload').on('click', function () {
    $('.dynamic-code').text(generateCaptcha(5, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));
});

//check captcha
$('#captcha-input').on('change', function () {
    if($(this).val() != $('.dynamic-code').text()){
        $('#errCaptcha').html('<span style="color: red;"><i class="ion-close"></i> Captecha not matched.</span>');
        $(this).val('');
    }else {
        $('#errCaptcha').html('');
    }
});

index.html

<!-- 
 * Simple Captcha System
 * @package Code Snippets
 * @link http://rhythmshahriar.com/codes/
 * @author Rhythm Shahriar <rhy@rhythmshahriar.com>
 * @link http://rhythmshahriar.com
 * @copyright Copyright © 2017, Rhythm Shahriar
-->

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Simple Captcha | Rhythm Shahriar</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Simple captcha system to easily integrate in a form, all you need to copy and paste the script into your project.">
    <meta name="keywords" content="rhythm shahriar, captcha, security, verification">
    <meta name="author" content="Rhythm Shahriar">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">

    <!-- simple captcha style -->
    <link rel="stylesheet" href="captcha.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<section id="captcha">

        <div class="title">
            <h2>Simple Captcha by <a href="http://rhythmshahriar.com">Rhythm Shahriar</a></h2>
        </div><!-- ./title -->

        <!-- default form layout -->
        <form class="captcha-from">
            <div class="form-group">
                <label for="firstName">First Name:</label>
                <input type="text" maxlength="25"  class="form-control" id="firstName" onkeypress="return isAlpha(event);" required autocomplete="off" placeholder="First name ...">
            </div>

            <div class="form-group">
                <label for="lastName">Last Name:</label>
                <input type="text" maxlength="25"  class="form-control" id="lastName" onkeypress="return isAlpha(event);"  required autocomplete="off" placeholder="Last name ...">
            </div>

            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" maxlength="50"  class="form-control" id="email" required autocomplete="off" placeholder="Email address ...">
                <span id="errEmail"></span>
            </div>

            <div class="form-group">
                <label for="phone">Phone:</label>
                <div class="input-group">
                    <span class="input-group-addon">+88</span>
                    <input type="text" maxlength="13" class="form-control" id="phone" onkeypress="return isNumber(event);" required autocomplete="off"  placeholder="01xxxxxx ...">
                </div>

            </div>


            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" maxlength="25" class="form-control" id="pwd" required autocomplete="off" placeholder="Enter password ...">
            </div>

            <div class="form-group">
                <label for="cpwd">Confirm Password:</label>
                <input type="password" maxlength="25"  minlength="5"  class="form-control" id="cpwd" required autocomplete="off"  placeholder="Re-enter password ...">
                <span id="errPwd"></span>
            </div>

            <div class="form-group">
                <label for="pwd">Captcha:</label>

                <!-- input captcha -->
                <div class="captcha-code">
                    <div class="code">
                        <div class="dynamic-code"></div>
                    </div>
                    <div class="captcha-reload">
                        <i class="ion-ios-loop-strong"></i>
                    </div>
                </div>
                <div class="captcha-input">
                    <input type="text" class="form-control" id="captcha-input"  required autocomplete="off"  placeholder="Enter captcha code ...">
                    <span id="errCaptcha"></span>
                </div>

            </div>


            <button type="submit" class="btn btn-default">Submit</button>
             <button type="reset" class="btn btn-default">Reset</button>
        </form>

        <center></center>

</section><!-- #/main -->

    <!-- advanced captcha script -->
    <script src="captcha.js"></script>

</body>

</html>

Thanks very good!

simple and good