Bootstrap Forms:

Bootstrap Password with Validation

Passwords are considered your first line of defence against unauthorized access to your account and personal data. the stronger your password is, the safer your account will be. You should always go for a strong password as it gives you the most amount of protection and you can never be too protected. Many websites use different systems to force you into making a strong password. As a website owner, you know that if a user loses their account, they will probably not accept it was their own fault and will blame it on you. To avoid this, you can use a Bootstrap forms effect with password validation.

Such form has different criteria for a password and will only consider the password you entered valid if all the criteria are fulfilled. In this post, we have a Bootstrap form stylish template with an option to validate your passwords. The factors you can set are uppercase letters, lowercase letters, symbols, digits and overall length of the password. The more of these factors you use in the validation form, the stronger your password will become. The number of green circles at the top of the screen indicate the factors required for the password. Bootstrap CSS forms with validation feature are a good way to ensure security.

Bootstrap Forms Effect

Bootstrap Form Stylish

Bootstrap CSS Forms

Free Password Form Code

<!-- This script got from frontendfreecode.com -->
<br>
<div class="container">
        <form class="jumbotron" role="form" name="form">
                <div class="row">
                        <div class="col-xs-6 col-xs-push-3">
                                <!-- Remove 'form-group-lg' to get it to his normal size -->
                                <div class="form-group form-group-lg">
                                        <label class="control-label">Password</label>
                                        <i class="glyphicon glyphicon-exclamation-sign required hide"
                                           data-hover="tooltip" data-placement="auto right" title="Required"></i>
                                        <div class="security-checker">
                                                <div id="security-cookies" class="security-cookie hide"
                                                         data-hover="tooltip" data-placement="auto top" title="Cookies !">
                                                </div>
                                                <div id="security-length" class="security-bar" data-hover="tooltip"
                                                         data-placement="auto top" title="Length">
                                                </div>
                                                <div id="security-lowercase" class="security-bar" data-hover="tooltip"
                                                         data-placement="auto top" title="Lowercase">
                                                </div>
                                                <div id="security-uppercase" class="security-bar" data-hover="tooltip"
                                                         data-placement="auto top" title="Uppercase">
                                                </div>
                                                <div id="security-digit" class="security-bar" data-hover="tooltip"
                                                         data-placement="auto top" title="Digit">
                                                </div>
                                                <div id="security-symbol" class="security-bar" data-hover="tooltip"
                                                         data-placement="auto top" title="Symbol">
                                                </div>
                                        </div>
                                        <div class="input-group">
                                                <div class="input-group-addon">
                                                        <i class="glyphicon glyphicon-lock"></i>
                                                </div>
                                                <input class="form-control" type="password" name="password"
                                                           placeholder="Enter your password" required
                                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@+$-/:-?{-~!^_`]).{8,}"
                                                           onchange="checkPasswordPattern(this)"
                                                           oninput="checkPasswordPattern(this)"
                                                           onkeydown="checkPasswordPattern(this)">
                                        </div>
                                        <!-- Use class 'before-group-addon' to make the form-control-feedback good -->
                                        <!-- Only if there is a input-group-addon on the input's right -->
                                        <i class="input-icon"></i>
                                        <span class="help-block">
                                                <strong>Protip:</strong> look at the circle to strongify it !
                                        </span>
                                </div>
                        </div>
                </div>
        </form>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    height: 100vh;
    background: #16a085!important;
    background-image: radial-gradient(center, #1abc9c, transparent 75%);
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*** ***/
.control-label,
.help-block {
    padding-left: 2px;
}

.form-control-feedback {
    z-index: 10;
}

.form-group-lg label.control-label {
    font-size: 20px;
}

.form-group-lg span.help-block {
    font-size: 14px;
}

.form-group-lg i.form-control-feedback {
    height: 46px;
    line-height: 46px;
    width: 46px;
    top: 33px;
}

.form-group-lg i.before-group-addon {
    right: 39px;
}

.form-group-lg i.required {
    padding-left: 4px !important;
    font-size: 17px;
}

.form-group-lg div.security-checker {
    margin: 4px 5px 0 0 !important;
}

    .form-group-lg div.security-checker .security-bar {
        width: 16px !important;
        height: 16px !important;
    }

        .form-group-lg div.security-checker .security-bar:before {
            border-width: 5px !important;
        }

.form-group i.before-group-addon {
    right: 39px;
}

.form-group i.required {
    color: #e68a00;
    padding-left: 2px;
}

    .form-group i.required:hover {
        cursor: pointer;
    }

.form-group div.security-checker {
    display: inline-block;
    float: right;
    margin: 0 4px;
}

    .form-group div.security-checker .security-cookie {
        display: inline-block;
        position: relative;
        height: 20px;
        width: 20px;
        margin: 0 1px;
        vertical-align: middle;
        background-image: url('https://res.cloudinary.com/cozen/image/upload/v1465080249/Cookies-20_gouhlq.png');
    }

    .form-group div.security-checker:hover {
        cursor: pointer;
    }

    .form-group div.security-checker .security-bar {
        display: inline-block;
        position: relative;
        height: 14px;
        width: 14px;
        margin: 0 1px;
        border-radius: 50%;
        border: 1px solid #aaaaaa;
        vertical-align: middle;
        background-color: #ffffff;
    }

        .form-group div.security-checker .security-bar:hover {
            cursor: pointer;
        }

        .form-group div.security-checker .security-bar:before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            border: 4px solid #ffffff;
            border-radius: 50%;
            transition: 350ms ease-out;
        }

        .form-group div.security-checker .security-bar.red:before {
            border-color: #a94442;
        }

        .form-group div.security-checker .security-bar.orange:before {
            border-color: #e67e22;
        }

        .form-group div.security-checker .security-bar.green:before {
            border-color: #3c763d;
        }

$(document).ready(function () {

    // Tooltips declaration
    $('[data-hover="tooltip"]').tooltip({
        delay: {
            show: 250,
            hide: 100
        }
    });

    // Show required icons
    if (!($('.form-group').hasClass('has-success'))) {
        $('.form-group i.required').removeClass('hide');
    }
});

// Call it to check if the pattern is respected
// Apply form control class to elements (red/green)
function checkPasswordPattern(input) {

    // DOM elements
    var fg = $(input).parent().parent();
    var ic = fg.find('i.input-icon');
    var r = fg.find('i.required');

    // Playing with error class
    if (input.checkValidity() == false) {
        fg.removeClass('has-success').addClass('has-feedback has-error');
        ic.removeClass('glyphicon-ok').addClass('glyphicon glyphicon-remove form-control-feedback');
        if (r.hasClass('hide')) {
            r.removeClass('hide').animo({
                animation: 'fadeInRight',
                duration: 0.4,
                timing: 'ease-out'
            });
        }

        // Playing with success class
    } else {
        fg.removeClass('has-error').addClass('has-feedback has-success');
        ic.removeClass('glyphicon-remove').addClass('glyphicon glyphicon-ok form-control-feedback');
        if (!(r.hasClass('hide'))) {
            r.animo({
                animation: 'fadeOutRight',
                duration: 0.3,
                timing: 'ease-in'
            }, function () {
                r.addClass('hide');
            });
        }
    }

    // Let's play now with circles !
    var text = input.value;
    var perfect = true;

    // Length
    if (text.length < 8) {
        $('#security-length').removeClass('green orange').addClass('red');
        perfect = false;
    } else if (text.length >= 8 && text.length < 13) {
        $('#security-length').removeClass('green red').addClass('orange');
        perfect = false;
    } else
        $('#security-length').removeClass('orange red').addClass('green');

    // Lowercase
    if (!(new RegExp('[a-z]').test(text))) {
        $('#security-lowercase').removeClass('green orange').addClass('red');
        perfect = false;
    } else
        $('#security-lowercase').removeClass('red orange').addClass('green');

    // Uppercase
    if (!(new RegExp('[A-Z]').test(text))) {
        $('#security-uppercase').removeClass('green orange').addClass('red');
        perfect = false;
    } else
        $('#security-uppercase').removeClass('red orange').addClass('green');

    // Digit
    if (!(new RegExp('[0-9]').test(text))) {
        $('#security-digit').removeClass('green orange').addClass('red');
        perfect = false;
    } else
        $('#security-digit').removeClass('red orange').addClass('green');

    // Symbol
    if (!(new RegExp(/[@+$-/:-?{-~!^_`]/).test(text))) {
        $('#security-symbol').removeClass('green orange').addClass('red');
        perfect = false;
    } else
        $('#security-symbol').removeClass('red orange').addClass('green');

    // Cookies animations
    var cookies = $('#security-cookies');
    if (perfect && cookies.hasClass('hide')) {
        cookies.removeClass('hide').animo({
            animation: 'fadeInLeft',
            duration: 0.4,
            timing: 'ease-out'
        });
    } else if (perfect == false && !(cookies.hasClass('hide'))) {
        cookies.animo({
            animation: 'fadeOutLeft',
            duration: 0.3,
            timing: 'ease-in'
        }, function () {
            cookies.addClass('hide');
        });
    }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animo.js/1.0.3/animate-animo.min.css'>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animo.js/1.0.3/animo.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animo.js/1.0.3/animate-animo.min.css'>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animo.js/1.0.3/animo.min.js'></script>
<style>
body {
    height: 100vh;
    background: #16a085!important;
    background-image: radial-gradient(center, #1abc9c, transparent 75%);
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*** ***/
.control-label,
.help-block {
    padding-left: 2px;
}

.form-control-feedback {
    z-index: 10;
}

.form-group-lg label.control-label {
    font-size: 20px;
}

.form-group-lg span.help-block {
    font-size: 14px;
}

.form-group-lg i.form-control-feedback {
    height: 46px;
    line-height: 46px;
    width: 46px;
    top: 33px;
}

.form-group-lg i.before-group-addon {
    right: 39px;
}

.form-group-lg i.required {
    padding-left: 4px !important;
    font-size: 17px;
}

.form-group-lg div.security-checker {
    margin: 4px 5px 0 0 !important;
}

    .form-group-lg div.security-checker .security-bar {
        width: 16px !important;
        height: 16px !important;
    }

        .form-group-lg div.security-checker .security-bar:before {
            border-width: 5px !important;
        }

.form-group i.before-group-addon {
    right: 39px;
}

.form-group i.required {
    color: #e68a00;
    padding-left: 2px;
}

    .form-group i.required:hover {
        cursor: pointer;
    }

.form-group div.security-checker {
    display: inline-block;
    float: right;
    margin: 0 4px;
}

    .form-group div.security-checker .security-cookie {
        display: inline-block;
        position: relative;
        height: 20px;
        width: 20px;
        margin: 0 1px;
        vertical-align: middle;
        background-image: url('https://res.cloudinary.com/cozen/image/upload/v1465080249/Cookies-20_gouhlq.png');
    }

    .form-group div.security-checker:hover {
        cursor: pointer;
    }

    .form-group div.security-checker .security-bar {
        display: inline-block;
        position: relative;
        height: 14px;
        width: 14px;
        margin: 0 1px;
        border-radius: 50%;
        border: 1px solid #aaaaaa;
        vertical-align: middle;
        background-color: #ffffff;
    }

        .form-group div.security-checker .security-bar:hover {
            cursor: pointer;
        }

        .form-group div.security-checker .security-bar:before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            border: 4px solid #ffffff;
            border-radius: 50%;
            transition: 350ms ease-out;
        }

        .form-group div.security-checker .security-bar.red:before {
            border-color: #a94442;
        }

        .form-group div.security-checker .security-bar.orange:before {
            border-color: #e67e22;
        }

        .form-group div.security-checker .security-bar.green:before {
            border-color: #3c763d;
        }
</style>

</head>
<body>
<br>
<div class="container">
        <form class="jumbotron" role="form" name="form">
                <div class="row">
                        <div class="col-xs-6 col-xs-push-3">
                                <!-- Remove 'form-group-lg' to get it to his normal size -->
                                <div class="form-group form-group-lg">
                                        <label class="control-label">Password</label>
                                        <i class="glyphicon glyphicon-exclamation-sign required hide"
                                           data-hover="tooltip" data-placement="auto right" title="Required"></i>
                                        <div class="security-checker">
                                                <div id="security-cookies" class="security-cookie hide"
                                                         data-hover="tooltip" data-placement="auto top" title="Cookies !">
                                                </div>
                                                <div id="security-length" class="security-bar" data-hover="tooltip"
                                                         data-placement="auto top" title="Length">
                                                </div>
                                                <div id="security-lowercase" class="security-bar" data-hover="tooltip"
                                                         data-placement="auto top" title="Lowercase">
                                                </div>
                                                <div id="security-uppercase" class="security-bar" data-hover="tooltip"
                                                         data-placement="auto top" title="Uppercase">
                                                </div>
                                                <div id="security-digit" class="security-bar" data-hover="tooltip"
                                                         data-placement="auto top" title="Digit">
                                                </div>
                                                <div id="security-symbol" class="security-bar" data-hover="tooltip"
                                                         data-placement="auto top" title="Symbol">
                                                </div>
                                        </div>
                                        <div class="input-group">
                                                <div class="input-group-addon">
                                                        <i class="glyphicon glyphicon-lock"></i>
                                                </div>
                                                <input class="form-control" type="password" name="password"
                                                           placeholder="Enter your password" required
                                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@+$-/:-?{-~!^_`]).{8,}"
                                                           onchange="checkPasswordPattern(this)"
                                                           oninput="checkPasswordPattern(this)"
                                                           onkeydown="checkPasswordPattern(this)">
                                        </div>
                                        <!-- Use class 'before-group-addon' to make the form-control-feedback good -->
                                        <!-- Only if there is a input-group-addon on the input's right -->
                                        <i class="input-icon"></i>
                                        <span class="help-block">
                                                <strong>Protip:</strong> look at the circle to strongify it !
                                        </span>
                                </div>
                        </div>
                </div>
        </form>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {

    // Tooltips declaration
    $('[data-hover="tooltip"]').tooltip({
        delay: {
            show: 250,
            hide: 100
        }
    });

    // Show required icons
    if (!($('.form-group').hasClass('has-success'))) {
        $('.form-group i.required').removeClass('hide');
    }
});

// Call it to check if the pattern is respected
// Apply form control class to elements (red/green)
function checkPasswordPattern(input) {

    // DOM elements
    var fg = $(input).parent().parent();
    var ic = fg.find('i.input-icon');
    var r = fg.find('i.required');

    // Playing with error class
    if (input.checkValidity() == false) {
        fg.removeClass('has-success').addClass('has-feedback has-error');
        ic.removeClass('glyphicon-ok').addClass('glyphicon glyphicon-remove form-control-feedback');
        if (r.hasClass('hide')) {
            r.removeClass('hide').animo({
                animation: 'fadeInRight',
                duration: 0.4,
                timing: 'ease-out'
            });
        }

        // Playing with success class
    } else {
        fg.removeClass('has-error').addClass('has-feedback has-success');
        ic.removeClass('glyphicon-remove').addClass('glyphicon glyphicon-ok form-control-feedback');
        if (!(r.hasClass('hide'))) {
            r.animo({
                animation: 'fadeOutRight',
                duration: 0.3,
                timing: 'ease-in'
            }, function () {
                r.addClass('hide');
            });
        }
    }

    // Let's play now with circles !
    var text = input.value;
    var perfect = true;

    // Length
    if (text.length < 8) {
        $('#security-length').removeClass('green orange').addClass('red');
        perfect = false;
    } else if (text.length >= 8 && text.length < 13) {
        $('#security-length').removeClass('green red').addClass('orange');
        perfect = false;
    } else
        $('#security-length').removeClass('orange red').addClass('green');

    // Lowercase
    if (!(new RegExp('[a-z]').test(text))) {
        $('#security-lowercase').removeClass('green orange').addClass('red');
        perfect = false;
    } else
        $('#security-lowercase').removeClass('red orange').addClass('green');

    // Uppercase
    if (!(new RegExp('[A-Z]').test(text))) {
        $('#security-uppercase').removeClass('green orange').addClass('red');
        perfect = false;
    } else
        $('#security-uppercase').removeClass('red orange').addClass('green');

    // Digit
    if (!(new RegExp('[0-9]').test(text))) {
        $('#security-digit').removeClass('green orange').addClass('red');
        perfect = false;
    } else
        $('#security-digit').removeClass('red orange').addClass('green');

    // Symbol
    if (!(new RegExp(/[@+$-/:-?{-~!^_`]/).test(text))) {
        $('#security-symbol').removeClass('green orange').addClass('red');
        perfect = false;
    } else
        $('#security-symbol').removeClass('red orange').addClass('green');

    // Cookies animations
    var cookies = $('#security-cookies');
    if (perfect && cookies.hasClass('hide')) {
        cookies.removeClass('hide').animo({
            animation: 'fadeInLeft',
            duration: 0.4,
            timing: 'ease-out'
        });
    } else if (perfect == false && !(cookies.hasClass('hide'))) {
        cookies.animo({
            animation: 'fadeOutLeft',
            duration: 0.3,
            timing: 'ease-in'
        }, function () {
            cookies.addClass('hide');
        });
    }
}
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS