how to customize jQuery Password Strength indicator location

Question

I'm using jQuery Password Strength plugin for Twitter Bootstrap to display password strength. when we enter new password, the indicator will display the strength of it. i want to display the password strength indicator inside of the custom div. the jQuery Password Strength plugin is like this

  jQuery(document).ready(function () { var options = { onLoad: function () { $('#messages').text('Start typing password'); }, onKeyUp: function (evt) { $(evt.target).pwstrength("outputErrorList"); } }; $('#new_password').pwstrength(options); }); (function ($) { "use strict"; var options = { errors: [], // Options minChar: 8, errorMessages: { password_to_short: "The Password is too short", same_as_username: "Your password cannot be the same as your username" }, scores: [17, 26, 40, 50], verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"], showVerdicts: true, raisePower: 1.4, usernameField: "#username", onLoad: undefined, onKeyUp: undefined, viewports: { progress: undefined, verdict: undefined, errors: undefined }, // Rules stuff ruleScores: { wordNotEmail: -100, wordLength: -100, wordSimilarToUsername: -100, wordLowercase: 1, wordUppercase: 3, wordOneNumber: 3, wordThreeNumbers: 5, wordOneSpecialChar: 3, wordTwoSpecialChar: 5, wordUpperLowerCombo: 2, wordLetterNumberCombo: 2, wordLetterNumberCharCombo: 2 }, rules: { wordNotEmail: true, wordLength: true, wordSimilarToUsername: true, wordLowercase: true, wordUppercase: true, wordOneNumber: true, wordThreeNumbers: true, wordOneSpecialChar: true, wordTwoSpecialChar: true, wordUpperLowerCombo: true, wordLetterNumberCombo: true, wordLetterNumberCharCombo: true }, validationRules: { wordNotEmail: function (options, word, score) { return word.match(/^([\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+\\.)*[\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+@((((([a-z0-9]{1}[a-z0-9\\-]{0,62}[a-z0-9]{1})|[az])\\.)+[az]{2,6})|(\\d{1,3}\\.){3}\\d{1,3}(\\:\\d{1,5})?)$/i) && score; }, wordLength: function (options, word, score) { var wordlen = word.length, lenScore = Math.pow(wordlen, options.raisePower); if (wordlen < options.minChar) { lenScore = (lenScore + score); options.errors.push(options.errorMessages.password_to_short); } return lenScore; }, wordSimilarToUsername: function (options, word, score) { var username = $(options.usernameField).val(); if (username && word.toLowerCase().match(username.toLowerCase())) { options.errors.push(options.errorMessages.same_as_username); return score; } return true; }, wordLowercase: function (options, word, score) { return word.match(/[az]/) && score; }, wordUppercase: function (options, word, score) { return word.match(/[AZ]/) && score; }, wordOneNumber : function (options, word, score) { return word.match(/\\d+/) && score; }, wordThreeNumbers : function (options, word, score) { return word.match(/(.*[0-9].*[0-9].*[0-9])/) && score; }, wordOneSpecialChar : function (options, word, score) { return word.match(/.[!,@,#,$,%,\\^,&,*,?,_,~]/) && score; }, wordTwoSpecialChar : function (options, word, score) { return word.match(/(.*[!,@,#,$,%,\\^,&,*,?,_,~].*[!,@,#,$,%,\\^,&,*,?,_,~])/) && score; }, wordUpperLowerCombo : function (options, word, score) { return word.match(/([az].*[AZ])|([AZ].*[az])/) && score; }, wordLetterNumberCombo : function (options, word, score) { return word.match(/([a-zA-Z])/) && word.match(/([0-9])/) && score; }, wordLetterNumberCharCombo : function (options, word, score) { return word.match(/([a-zA-Z0-9].*[!,@,#,$,%,\\^,&,*,?,_,~])|([!,@,#,$,%,\\^,&,*,?,_,~].*[a-zA-Z0-9])/) && score; } } }, setProgressBar = function ($el, score) { var options = $el.data("pwstrength"), progressbar = options.progressbar, $verdict; if (options.showVerdicts) { if (options.viewports.verdict) { $verdict = $(options.viewports.verdict).find(".password-verdict"); } else { $verdict = $el.parent().find(".password-verdict"); if ($verdict.length === 0) { $verdict = $('<span class="password-verdict"></span>'); $verdict.insertAfter($el); } } } if (score < options.scores[0]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "5%"); if (options.showVerdicts) { $verdict.text(options.verdicts[0]); } } else if (score >= options.scores[0] && score < options.scores[1]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "25%"); if (options.showVerdicts) { $verdict.text(options.verdicts[1]); } } else if (score >= options.scores[1] && score < options.scores[2]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "50%"); if (options.showVerdicts) { $verdict.text(options.verdicts[2]); } } else if (score >= options.scores[2] && score < options.scores[3]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "75%"); if (options.showVerdicts) { $verdict.text(options.verdicts[3]); } } else if (score >= options.scores[3]) { progressbar.addClass("progress-success").removeClass("progress-warning").removeClass("progress-danger"); progressbar.find(".bar").css("width", "100%"); if (options.showVerdicts) { $verdict.text(options.verdicts[4]); } } }, calculateScore = function ($el) { var self = this, word = $el.val(), totalScore = 0, options = $el.data("pwstrength"); $.each(options.rules, function (rule, active) { if (active === true) { var score = options.ruleScores[rule], result = options.validationRules[rule](options, word, score); if (result) { totalScore += result; } } }); setProgressBar($el, totalScore); return totalScore; }, progressWidget = function () { return '<div class="progress"><div class="bar"></div></div>'; }, methods = { init: function (settings) { var self = this, allOptions = $.extend(options, settings); return this.each(function (idx, el) { var $el = $(el), progressbar, verdict; $el.data("pwstrength", allOptions); $el.on("keyup", function (event) { var options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); if ($.isFunction(options.onKeyUp)) { options.onKeyUp(event); } }); progressbar = $(progressWidget()); if (allOptions.viewports.progress) { $(allOptions.viewports.progress).append(progressbar); } else { progressbar.insertAfter($el); } progressbar.find(".bar").css("width", "0%"); $el.data("pwstrength").progressbar = progressbar; if (allOptions.showVerdicts) { verdict = $('<span class="password-verdict">' + allOptions.verdicts[0] + '</span>'); if (allOptions.viewports.verdict) { $(allOptions.viewports.verdict).append(verdict); } else { verdict.insertAfter($el); } } if ($.isFunction(allOptions.onLoad)) { allOptions.onLoad(); } }); }, destroy: function () { this.each(function (idx, el) { var $el = $(el); $el.parent().find("span.password-verdict").remove(); $el.parent().find("div.progress").remove(); $el.parent().find("ul.error-list").remove(); $el.removeData("pwstrength"); }); }, forceUpdate: function () { var self = this; this.each(function (idx, el) { var $el = $(el), options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); }); }, outputErrorList: function () { this.each(function (idx, el) { var output = '<ul class="error-list">', $el = $(el), errors = $el.data("pwstrength").errors, viewports = $el.data("pwstrength").viewports, verdict; $el.parent().find("ul.error-list").remove(); if (errors.length > 0) { $.each(errors, function (i, item) { output += '<li>' + item + '</li>'; }); output += '</ul>'; if (viewports.errors) { $(viewports.errors).html(output); } else { output = $(output); verdict = $el.parent().find("span.password-verdict"); if (verdict.length > 0) { el = verdict; } output.insertAfter(el); } } }); }, addRule: function (name, method, score, active) { this.each(function (idx, el) { var options = $(el).data("pwstrength"); options.rules[name] = active; options.ruleScores[name] = score; options.validationRules[name] = method; }); }, changeScore: function (rule, score) { this.each(function (idx, el) { $(el).data("pwstrength").ruleScores[rule] = score; }); }, ruleActive: function (rule, active) { this.each(function (idx, el) { $(el).data("pwstrength").rules[rule] = active; }); } }; $.fn.pwstrength = function (method) { var result; if (methods[method]) { result = methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || !method) { result = methods.init.apply(this, arguments); } else { $.error("Method " + method + " does not exist on jQuery.pwstrength"); } return result; }; }(jQuery)); 

 @-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}@-moz-keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}@-ms-keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;} to{background-position:0 0;}}.progress{overflow:hidden;height:20px;margin-bottom:20px;background-color:#f7f7f7;background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(to bottom, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .progress .bar{width:0%;height:100%;color:#ffffff;float:left;font-size:12px;text-align:center;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0e90d2;background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(to bottom, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} .progress .bar+.bar{-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);-moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);} .progress-striped .bar{background-color:#149bdf;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;} .progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;-ms-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} .progress-danger .bar,.progress .bar-danger{background-color:#dd514c;background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(to bottom, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);} .progress-danger.progress-striped .bar,.progress-striped .bar-danger{background-color:#ee5f5b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress-success .bar,.progress .bar-success{background-color:#5eb95e;background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(to bottom, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);} .progress-success.progress-striped .bar,.progress-striped .bar-success{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress-info .bar,.progress .bar-info{background-color:#4bb1cf;background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(to bottom, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);} .progress-info.progress-striped .bar,.progress-striped .bar-info{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress-warning .bar,.progress .bar-warning{background-color:#faa732;background-image:-moz-linear-gradient(top, #fbb450, #f89406);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));background-image:-webkit-linear-gradient(top, #fbb450, #f89406);background-image:-o-linear-gradient(top, #fbb450, #f89406);background-image:linear-gradient(to bottom, #fbb450, #f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);} .progress-warning.progress-striped .bar,.progress-striped .bar-warning{background-color:#fbb450;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <form> <fieldset> <legend>Please type in your password</legend> Current Password: <input type="password" id="current_password" /><br /> New Password: <input type="password" id="new_password" /> Confirm Password: <input type="password" id="confirm_password" /><br /> Password Strength: <div id="password-indicator"></div> </fieldset> </form> 

I would appreciate any help where we can customize the indicator's location and display the password strength indicator inside of the custom div password-indicator

Password Strength: <div id="password-indicator"></div>

Answer 1

The snippet below shows exactly what you want.

Explanation : I just added two new options : verdictLocation and progressBarLocation . These two new options should contain the selector after which the verdict and the progress bar are moved respectively.

Thus, I just added

<div id="verdict-location"></div>
<div id="progress-bar-location"></div>

to set the new verdict and progress bar locations.

Note : The errors are currently set after the verdict. If you want, you can follow the same logic and implement an error location (ie add another option). It's up to you.

 jQuery(document).ready(function() { var options = { onLoad: function() { $('#messages').text('Start typing password'); }, onKeyUp: function(evt) { $(evt.target).pwstrength("outputErrorList"); } }; $('#new_password').pwstrength(options); }); (function($) { "use strict"; var options = { errors: [], // Options verdictLocation: '#verdict-location', // New option progressBarLocation: '#progress-bar-location', // New option minChar: 8, errorMessages: { password_to_short: "The Password is too short", same_as_username: "Your password cannot be the same as your username" }, scores: [17, 26, 40, 50], verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"], showVerdicts: true, raisePower: 1.4, usernameField: "#username", onLoad: undefined, onKeyUp: undefined, viewports: { progress: undefined, verdict: undefined, errors: undefined }, // Rules stuff ruleScores: { wordNotEmail: -100, wordLength: -100, wordSimilarToUsername: -100, wordLowercase: 1, wordUppercase: 3, wordOneNumber: 3, wordThreeNumbers: 5, wordOneSpecialChar: 3, wordTwoSpecialChar: 5, wordUpperLowerCombo: 2, wordLetterNumberCombo: 2, wordLetterNumberCharCombo: 2 }, rules: { wordNotEmail: true, wordLength: true, wordSimilarToUsername: true, wordLowercase: true, wordUppercase: true, wordOneNumber: true, wordThreeNumbers: true, wordOneSpecialChar: true, wordTwoSpecialChar: true, wordUpperLowerCombo: true, wordLetterNumberCombo: true, wordLetterNumberCharCombo: true }, validationRules: { wordNotEmail: function(options, word, score) { return word.match(/^([\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+\\.)*[\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+@((((([a-z0-9]{1}[a-z0-9\\-]{0,62}[a-z0-9]{1})|[az])\\.)+[az]{2,6})|(\\d{1,3}\\.){3}\\d{1,3}(\\:\\d{1,5})?)$/i) && score; }, wordLength: function(options, word, score) { var wordlen = word.length, lenScore = Math.pow(wordlen, options.raisePower); if (wordlen < options.minChar) { lenScore = (lenScore + score); options.errors.push(options.errorMessages.password_to_short); } return lenScore; }, wordSimilarToUsername: function(options, word, score) { var username = $(options.usernameField).val(); if (username && word.toLowerCase().match(username.toLowerCase())) { options.errors.push(options.errorMessages.same_as_username); return score; } return true; }, wordLowercase: function(options, word, score) { return word.match(/[az]/) && score; }, wordUppercase: function(options, word, score) { return word.match(/[AZ]/) && score; }, wordOneNumber: function(options, word, score) { return word.match(/\\d+/) && score; }, wordThreeNumbers: function(options, word, score) { return word.match(/(.*[0-9].*[0-9].*[0-9])/) && score; }, wordOneSpecialChar: function(options, word, score) { return word.match(/.[!,@,#,$,%,\\^,&,*,?,_,~]/) && score; }, wordTwoSpecialChar: function(options, word, score) { return word.match(/(.*[!,@,#,$,%,\\^,&,*,?,_,~].*[!,@,#,$,%,\\^,&,*,?,_,~])/) && score; }, wordUpperLowerCombo: function(options, word, score) { return word.match(/([az].*[AZ])|([AZ].*[az])/) && score; }, wordLetterNumberCombo: function(options, word, score) { return word.match(/([a-zA-Z])/) && word.match(/([0-9])/) && score; }, wordLetterNumberCharCombo: function(options, word, score) { return word.match(/([a-zA-Z0-9].*[!,@,#,$,%,\\^,&,*,?,_,~])|([!,@,#,$,%,\\^,&,*,?,_,~].*[a-zA-Z0-9])/) && score; } } }, setProgressBar = function($el, score) { var options = $el.data("pwstrength"), progressbar = options.progressbar, $verdict; if (options.showVerdicts) { if (options.viewports.verdict) { $verdict = $(options.viewports.verdict).find(".password-verdict"); } else { $verdict = $el.parent().find(".password-verdict"); if ($verdict.length === 0) { $verdict = $('<span class="password-verdict"></span>'); $verdict.insertAfter(options.verdictLocation); //Changed $el to option } } } if (score < options.scores[0]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "5%"); if (options.showVerdicts) { $verdict.text(options.verdicts[0]); } } else if (score >= options.scores[0] && score < options.scores[1]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "25%"); if (options.showVerdicts) { $verdict.text(options.verdicts[1]); } } else if (score >= options.scores[1] && score < options.scores[2]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "50%"); if (options.showVerdicts) { $verdict.text(options.verdicts[2]); } } else if (score >= options.scores[2] && score < options.scores[3]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "75%"); if (options.showVerdicts) { $verdict.text(options.verdicts[3]); } } else if (score >= options.scores[3]) { progressbar.addClass("progress-success").removeClass("progress-warning").removeClass("progress-danger"); progressbar.find(".bar").css("width", "100%"); if (options.showVerdicts) { $verdict.text(options.verdicts[4]); } } }, calculateScore = function($el) { var self = this, word = $el.val(), totalScore = 0, options = $el.data("pwstrength"); $.each(options.rules, function(rule, active) { if (active === true) { var score = options.ruleScores[rule], result = options.validationRules[rule](options, word, score); if (result) { totalScore += result; } } }); setProgressBar($el, totalScore); return totalScore; }, progressWidget = function() { return '<div id="password-indicator"><div class="progress"><div class="bar"></div></div></div>'; }, methods = { init: function(settings) { var self = this, allOptions = $.extend(options, settings); return this.each(function(idx, el) { var $el = $(el), progressbar, verdict; $el.data("pwstrength", allOptions); $el.on("keyup", function(event) { var options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); if ($.isFunction(options.onKeyUp)) { options.onKeyUp(event); } }); progressbar = $(progressWidget()); if (allOptions.viewports.progress) { $(allOptions.viewports.progress).append(progressbar); } else { progressbar.insertAfter(options.progressBarLocation); } progressbar.find(".bar").css("width", "0%"); $el.data("pwstrength").progressbar = progressbar; if (allOptions.showVerdicts) { verdict = $('<span class="password-verdict">' + allOptions.verdicts[0] + '</span>'); if (allOptions.viewports.verdict) { $(allOptions.viewports.verdict).append(verdict); } else { verdict.insertAfter(options.verdictLocation); // Changed } } if ($.isFunction(allOptions.onLoad)) { allOptions.onLoad(); } }); }, destroy: function() { this.each(function(idx, el) { var $el = $(el); $el.parent().find("span.password-verdict").remove(); $el.parent().find("div.progress").remove(); $el.parent().find("ul.error-list").remove(); $el.removeData("pwstrength"); }); }, forceUpdate: function() { var self = this; this.each(function(idx, el) { var $el = $(el), options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); }); }, outputErrorList: function() { this.each(function(idx, el) { var output = '<ul class="error-list">', $el = $(el), errors = $el.data("pwstrength").errors, viewports = $el.data("pwstrength").viewports, verdict; $el.parent().find("ul.error-list").remove(); if (errors.length > 0) { $.each(errors, function(i, item) { output += '<li>' + item + '</li>'; }); output += '</ul>'; if (viewports.errors) { $(viewports.errors).html(output); } else { output = $(output); verdict = $el.parent().find("span.password-verdict"); if (verdict.length > 0) { el = verdict; } output.insertAfter(el); } } }); }, addRule: function(name, method, score, active) { this.each(function(idx, el) { var options = $(el).data("pwstrength"); options.rules[name] = active; options.ruleScores[name] = score; options.validationRules[name] = method; }); }, changeScore: function(rule, score) { this.each(function(idx, el) { $(el).data("pwstrength").ruleScores[rule] = score; }); }, ruleActive: function(rule, active) { this.each(function(idx, el) { $(el).data("pwstrength").rules[rule] = active; }); } }; $.fn.pwstrength = function(method) { var result; if (methods[method]) { result = methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || !method) { result = methods.init.apply(this, arguments); } else { $.error("Method " + method + " does not exist on jQuery.pwstrength"); } return result; }; }(jQuery)); 

 @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-moz-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-ms-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-o-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress { overflow: hidden; height: 20px; margin-bottom: 20px; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .progress .bar { width: 0%; height: 100%; color: #ffffff; float: left; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(to bottom, #149bdf, #0480be); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } .progress .bar+.bar { -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); } .progress-striped .bar { background-color: #149bdf; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; background-size: 40px 40px; } .progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .progress-danger .bar, .progress .bar-danger { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } .progress-danger.progress-striped .bar, .progress-striped .bar-danger { background-color: #ee5f5b; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-success .bar, .progress .bar-success { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(to bottom, #62c462, #57a957); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } .progress-success.progress-striped .bar, .progress-striped .bar-success { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-info .bar, .progress .bar-info { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(to bottom, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } .progress-info.progress-striped .bar, .progress-striped .bar-info { background-color: #5bc0de; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-warning .bar, .progress .bar-warning { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } .progress-warning.progress-striped .bar, .progress-striped .bar-warning { background-color: #fbb450; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <form> <fieldset> <legend>Please type in your password</legend> Current Password: <input type="password" id="current_password" /> <br />New Password: <input type="password" id="new_password" />Confirm Password: <input type="password" id="confirm_password" /> <br />Password Strength: <p> ----------------------------------------------------------</p> <p> Let's move indicator and progress bar after this paragraph</p> <p> ----------------------------------------------------------</p> <div id="verdict-location"></div> <div id="progress-bar-location"></div> </fieldset> </form> 

Answer 2

 jQuery(document).ready(function() { var options = { onLoad: function() { $('#messages').text('Start typing password'); }, onKeyUp: function(evt) { $(evt.target).pwstrength("outputErrorList"); } }; $('#new_password').pwstrength(options); }); (function($) { "use strict"; var options = { errors: [], // Options verdictLocation: '#verdict-location', // New option progressBarLocation: '#progress-bar-location', // New option minChar: 8, errorMessages: { password_to_short: "The Password is too short", same_as_username: "Your password cannot be the same as your username" }, scores: [17, 26, 40, 50], verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"], showVerdicts: true, raisePower: 1.4, usernameField: "#username", onLoad: undefined, onKeyUp: undefined, viewports: { progress: undefined, verdict: undefined, errors: undefined }, // Rules stuff ruleScores: { wordNotEmail: -100, wordLength: -100, wordSimilarToUsername: -100, wordLowercase: 1, wordUppercase: 3, wordOneNumber: 3, wordThreeNumbers: 5, wordOneSpecialChar: 3, wordTwoSpecialChar: 5, wordUpperLowerCombo: 2, wordLetterNumberCombo: 2, wordLetterNumberCharCombo: 2 }, rules: { wordNotEmail: true, wordLength: true, wordSimilarToUsername: true, wordLowercase: true, wordUppercase: true, wordOneNumber: true, wordThreeNumbers: true, wordOneSpecialChar: true, wordTwoSpecialChar: true, wordUpperLowerCombo: true, wordLetterNumberCombo: true, wordLetterNumberCharCombo: true }, validationRules: { wordNotEmail: function(options, word, score) { return word.match(/^([\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+\\.)*[\\w\\!\\#$\\%\\&\\'\\*\\+\\-\\/\\=\\?\\^\\`{\\|\\}\\~]+@((((([a-z0-9]{1}[a-z0-9\\-]{0,62}[a-z0-9]{1})|[az])\\.)+[az]{2,6})|(\\d{1,3}\\.){3}\\d{1,3}(\\:\\d{1,5})?)$/i) && score; }, wordLength: function(options, word, score) { var wordlen = word.length, lenScore = Math.pow(wordlen, options.raisePower); if (wordlen < options.minChar) { lenScore = (lenScore + score); options.errors.push(options.errorMessages.password_to_short); } return lenScore; }, wordSimilarToUsername: function(options, word, score) { var username = $(options.usernameField).val(); if (username && word.toLowerCase().match(username.toLowerCase())) { options.errors.push(options.errorMessages.same_as_username); return score; } return true; }, wordLowercase: function(options, word, score) { return word.match(/[az]/) && score; }, wordUppercase: function(options, word, score) { return word.match(/[AZ]/) && score; }, wordOneNumber: function(options, word, score) { return word.match(/\\d+/) && score; }, wordThreeNumbers: function(options, word, score) { return word.match(/(.*[0-9].*[0-9].*[0-9])/) && score; }, wordOneSpecialChar: function(options, word, score) { return word.match(/.[!,@,#,$,%,\\^,&,*,?,_,~]/) && score; }, wordTwoSpecialChar: function(options, word, score) { return word.match(/(.*[!,@,#,$,%,\\^,&,*,?,_,~].*[!,@,#,$,%,\\^,&,*,?,_,~])/) && score; }, wordUpperLowerCombo: function(options, word, score) { return word.match(/([az].*[AZ])|([AZ].*[az])/) && score; }, wordLetterNumberCombo: function(options, word, score) { return word.match(/([a-zA-Z])/) && word.match(/([0-9])/) && score; }, wordLetterNumberCharCombo: function(options, word, score) { return word.match(/([a-zA-Z0-9].*[!,@,#,$,%,\\^,&,*,?,_,~])|([!,@,#,$,%,\\^,&,*,?,_,~].*[a-zA-Z0-9])/) && score; } } }, setProgressBar = function($el, score) { var options = $el.data("pwstrength"), progressbar = options.progressbar, $verdict; if (options.showVerdicts) { if (options.viewports.verdict) { $verdict = $(options.viewports.verdict).find(".password-verdict"); } else { $verdict = $el.parent().find(".password-verdict"); if ($verdict.length === 0) { $verdict = $('<span class="password-verdict"></span>'); $verdict.insertAfter(options.verdictLocation); //Changed $el to option } } } if (score < options.scores[0]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "5%"); if (options.showVerdicts) { $verdict.text(options.verdicts[0]); } } else if (score >= options.scores[0] && score < options.scores[1]) { progressbar.addClass("progress-danger").removeClass("progress-warning").removeClass("progress-success"); progressbar.find(".bar").css("width", "25%"); if (options.showVerdicts) { $verdict.text(options.verdicts[1]); } } else if (score >= options.scores[1] && score < options.scores[2]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "50%"); if (options.showVerdicts) { $verdict.text(options.verdicts[2]); } } else if (score >= options.scores[2] && score < options.scores[3]) { progressbar.addClass("progress-warning").removeClass("progress-danger").removeClass("progress-success"); progressbar.find(".bar").css("width", "75%"); if (options.showVerdicts) { $verdict.text(options.verdicts[3]); } } else if (score >= options.scores[3]) { progressbar.addClass("progress-success").removeClass("progress-warning").removeClass("progress-danger"); progressbar.find(".bar").css("width", "100%"); if (options.showVerdicts) { $verdict.text(options.verdicts[4]); } } }, calculateScore = function($el) { var self = this, word = $el.val(), totalScore = 0, options = $el.data("pwstrength"); $.each(options.rules, function(rule, active) { if (active === true) { var score = options.ruleScores[rule], result = options.validationRules[rule](options, word, score); if (result) { totalScore += result; } } }); setProgressBar($el, totalScore); return totalScore; }, progressWidget = function() { return '<div id="password-indicator"><div class="progress"><div class="bar"></div></div></div>'; }, methods = { init: function(settings) { var self = this, allOptions = $.extend(options, settings); return this.each(function(idx, el) { var $el = $(el), progressbar, verdict; $el.data("pwstrength", allOptions); $el.on("keyup", function(event) { var options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); if ($.isFunction(options.onKeyUp)) { options.onKeyUp(event); } }); progressbar = $(progressWidget()); if (allOptions.viewports.progress) { $(allOptions.viewports.progress).append(progressbar); } else { progressbar.insertAfter(options.progressBarLocation); } progressbar.find(".bar").css("width", "0%"); $el.data("pwstrength").progressbar = progressbar; if (allOptions.showVerdicts) { verdict = $('<span class="password-verdict">' + allOptions.verdicts[0] + '</span>'); if (allOptions.viewports.verdict) { $(allOptions.viewports.verdict).append(verdict); } else { verdict.insertAfter(options.verdictLocation); // Changed } } if ($.isFunction(allOptions.onLoad)) { allOptions.onLoad(); } }); }, destroy: function() { this.each(function(idx, el) { var $el = $(el); $el.parent().find("span.password-verdict").remove(); $el.parent().find("div.progress").remove(); $el.parent().find("ul.error-list").remove(); $el.removeData("pwstrength"); }); }, forceUpdate: function() { var self = this; this.each(function(idx, el) { var $el = $(el), options = $el.data("pwstrength"); options.errors = []; calculateScore.call(self, $el); }); }, outputErrorList: function() { this.each(function(idx, el) { var output = '<ul class="error-list">', $el = $(el), errors = $el.data("pwstrength").errors, viewports = $el.data("pwstrength").viewports, verdict; $el.parent().find("ul.error-list").remove(); if (errors.length > 0) { $.each(errors, function(i, item) { output += '<li>' + item + '</li>'; }); output += '</ul>'; if (viewports.errors) { $(viewports.errors).html(output); } else { output = $(output); verdict = $el.parent().find("span.password-verdict"); if (verdict.length > 0) { el = verdict; } output.insertAfter(el); } } }); }, addRule: function(name, method, score, active) { this.each(function(idx, el) { var options = $(el).data("pwstrength"); options.rules[name] = active; options.ruleScores[name] = score; options.validationRules[name] = method; }); }, changeScore: function(rule, score) { this.each(function(idx, el) { $(el).data("pwstrength").ruleScores[rule] = score; }); }, ruleActive: function(rule, active) { this.each(function(idx, el) { $(el).data("pwstrength").rules[rule] = active; }); } }; $.fn.pwstrength = function(method) { var result; if (methods[method]) { result = methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || !method) { result = methods.init.apply(this, arguments); } else { $.error("Method " + method + " does not exist on jQuery.pwstrength"); } return result; }; }(jQuery)); 

 @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-moz-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-ms-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-o-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress { overflow: hidden; height: 20px; margin-bottom: 20px; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .progress .bar { width: 0%; height: 100%; color: #ffffff; float: left; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(to bottom, #149bdf, #0480be); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; } .progress .bar+.bar { -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 1px 0 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); } .progress-striped .bar { background-color: #149bdf; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; background-size: 40px 40px; } .progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .progress-danger .bar, .progress .bar-danger { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } .progress-danger.progress-striped .bar, .progress-striped .bar-danger { background-color: #ee5f5b; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-success .bar, .progress .bar-success { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(to bottom, #62c462, #57a957); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } .progress-success.progress-striped .bar, .progress-striped .bar-success { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-info .bar, .progress .bar-info { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(to bottom, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } .progress-info.progress-striped .bar, .progress-striped .bar-info { background-color: #5bc0de; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-warning .bar, .progress .bar-warning { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } .progress-warning.progress-striped .bar, .progress-striped .bar-warning { background-color: #fbb450; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <form> <fieldset> <legend>Please type in your password</legend> <br />Current Password:<br /> <input type="password" id="current_password" /> <br />New Password: <br /><input type="password" id="new_password" /> <br />Confirm Password:<br /> <input type="password" id="confirm_password" /><br /><br /> Password Strength: <div id="verdict-location"></div> <div id="progress-bar-location"></div> </fieldset> </form> 

More accurate by aligning input fields for users to see clearly.