<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <p class="well">#password has type of text instead of password just for testing purposes</p> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <label>Password</label> <input type="text" class="form-control pwd" name="password" id="password" placeholder="Password"> <div class="progress"> <div class="progress-bar progress-bar-danger" id="password-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0"> <span class="sr-only">0% Complete (danger)</span> <span id="progress-bar-text" style="color:#000;"></span> </div> </div> </div> </div> </div> </div>

function changePasswordProgressBar(ev) { // less than 8 characters var wrost = 7, // minimum 8 characters bad = /(?=.{8,}).*/, //Alpha Numeric plus minimum 8 good = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{8,}$/, //Must contain at least one upper case letter, one lower case letter and (one number OR one special char). better = /^(?=\S*?[A-Z])(?=\S*?[a-z])((?=\S*?[0-9])|(?=\S*?[^\w\*]))\S{8,}$/, //Must contain at least one upper case letter, one lower case letter and (one number AND one special char). best = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{8,}$/, password = $(ev.target).val(), strength = '0', progressClass = 'progress-bar progress-bar-', ariaMsg = '0% Complete (danger)', $progressBarElement = $('#password-progress-bar'); if (best.test(password) === true) { strength = '100%'; progressClass += 'success'; ariaMsg = '100% Complete (success)'; } else if (better.test(password) === true) { strength = '80%'; progressClass += 'info'; ariaMsg = '80% Complete (info)'; } else if (good.test(password) === true) { strength = '50%'; progressClass += 'warning'; ariaMsg = '50% Complete (warning)'; } else if (bad.test(password) === true) { strength = '30%'; progressClass += 'warning'; ariaMsg = '30% Complete (warning)'; } else if (password.length >= 1 && password.length <= wrost) { strength = '10%'; progressClass += 'danger'; ariaMsg = '10% Complete (danger)'; } else if (password.length < 1) { strength = '0'; progressClass += 'danger'; ariaMsg = '0% Complete (danger)'; } $progressBarElement.removeClass().addClass(progressClass); $progressBarElement.attr('aria-valuenow', strength); $progressBarElement.css('width', strength); $progressBarElement.find('span.sr-only').text(ariaMsg); } $(document).ready(function () { $(".pwd").first().on('keyup', changePasswordProgressBar); });