Hii,
In this blog, I am sharing jQuery code by which you can set validation i.e check password strength in your form. By adding this option in your form, You can enhance the security level of form by adding validation for the password.
Go through the given example below to learn how to check password strength and how to make your form's password input field more strong by using this jQuery validation code.
In the given example user have to set their password as per the given format of validation to make their password strength strong.
Html
<body>
<h1><span>Check Your Password Strength</span></h1>
<form id="form" action="" method="get" accept-charset="utf-8">
<input id="myPassword" type="password" name="" value="">
<p>Must include a UpperCase alphabet,a special character and a numeric value to make
your password strength strong.</p>
</form>
</body>
CSS:
html{background:#437DCC;font-family: 'Lato', sans-serif;color:white;}
#form input[type="password"],#form input[type="text"]{background:transparent;border: 2px solid #0077CC;color: #777;font-family: "Lato", sans-serif;
font-size: 14px;padding: 9px 5px;height: 21px;text-indent: 6px;-webkit-appearance: none;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;-webkit-transition: border .25s linear, color .25s linear;width:100%;
-moz-transition: border .25s linear color .25s linear;
-o-transition: border .25s linear, color .25s linear;
transition: border .25s linear, color .25s linear;
-webkit-backface-visibility: hidden;
}
#form input[type="password"]:focus,#form input[type="text"]:focus{outline:0;}
#form{width: 500px;margin: 0 auto;position: relative;margin-bottom:60px;}
.strength_meter{position: absolute;left: 0px;top: 0px;width: 100%;height: 43px;z-index:-1;border-radius:5px;padding-right:13px;}
.button_strength {text-decoration: none;color: #FFF;font-size: 13px;}
.strength_meter div{width:0%;height: 43px;text-align: right;color: #000;line-height: 43px;padding-right: 12px;
border-radius:5px;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.strength_meter div p{position: absolute;top: 22px;right: 0px;color: #FFF;font-size:13px;}
.veryweak{background-color: #F48024;border-color: #F48024!important;width:25%!important;}
.weak{background-color: #FFB78C;border-color: #FF853C!important;width:50%!important;}
.medium{background-color: #FFEC8B;border-color: #FC0!important;width:75%!important;}
.strong{background-color: #C3FF88;border-color: #8DFF1C!important;width:100%!important;}
h1{color:white;font-size:50px;text-align:center;padding-top:30px;margin:50px auto 20px;}
h1 span{font-weight:bold;color:white;opacity:.3;}
jQuery:
$(document).ready(function($) {
$('#myPassword').strength({
strengthClass: 'strength',
strengthMeterClass: 'strength_meter',
strengthButtonClass: 'button_strength',
strengthButtonText: 'Show Password',
strengthButtonTextToggle: 'Hide Password'
});
});
(function ( $, window, document, undefined ) {
var pluginName = "strength",
defaults = {
strengthClass: 'strength',
strengthMeterClass: 'strength_meter',
strengthButtonClass: 'button_strength',
strengthButtonText: 'Show Password',
strengthButtonTextToggle: 'Hide Password'
};
function Plugin( element, options ) {
this.element = element;
this.$elem = $(this.element);
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var characters = 0;
var capitalletters = 0;
var loweletters = 0;
var number = 0;
var special = 0;
var upperCase= new RegExp('[A-Z]');
var lowerCase= new RegExp('[a-z]');
var numbers = new RegExp('[0-9]');
var specialchars = new RegExp('([!,%,&,@,#,$,^,*,?,_,~])');
function GetPercentage(a, b) {
return ((b / a) * 100);
}
function check_strength(thisval,thisid){
if (thisval.length > 8) { characters = 1; } else { characters = 0; };
if (thisval.match(upperCase)) { capitalletters = 1} else { capitalletters = 0; };
if (thisval.match(lowerCase)) { loweletters = 1} else { loweletters = 0; };
if (thisval.match(numbers)) { number = 1} else { number = 0; };
var total = characters + capitalletters + loweletters + number + special;
var totalpercent = GetPercentage(7, total).toFixed(0);
get_total(total,thisid);
}
function get_total(total,thisid){
var thismeter = $('div[data-meter="'+thisid+'"]');
if(total == 0){
thismeter.removeClass().html('');
}else if (total <= 1) {
thismeter.removeClass();
thismeter.addClass('veryweak').html('<p>Strength: very weak</p>');
} else if (total == 2){
thismeter.removeClass();
thismeter.addClass('weak').html('<p>Strength: weak</p>');
} else if(total == 3){
thismeter.removeClass();
thismeter.addClass('medium').html('<p>Strength: medium</p>');
} else {
thismeter.removeClass();
thismeter.addClass('strong').html('<p>Strength: strong</p>');
}
console.log(total);
}
var isShown = false;
var strengthButtonText = this.options.strengthButtonText;
var strengthButtonTextToggle = this.options.strengthButtonTextToggle;
thisid = this.$elem.attr('id');
this.$elem.addClass(this.options.strengthClass).attr('data-password',thisid).after('<input style="display:none" class="'+this.options.strengthClass+'" data-password="'+thisid+'" type="text" name="" value=""><a data-password-button="'+thisid+'" href="" class="'+this.options.strengthButtonClass+'">'+this.options.strengthButtonText+'</a><div class="'+this.options.strengthMeterClass+'"><div data-meter="'+thisid+'"><p></p></div></div>');
this.$elem.bind('keyup keydown', function(event) {
thisval = $('#'+thisid).val();
$('input[type="text"][data-password="'+thisid+'"]').val(thisval);
check_strength(thisval,thisid);
});
$('input[type="text"][data-password="'+thisid+'"]').bind('keyup keydown', function(event) {
thisval = $('input[type="text"][data-password="'+thisid+'"]').val();
console.log(thisval);
$('input[type="password"][data-password="'+thisid+'"]').val(thisval);
check_strength(thisval,thisid);
});
$(document.body).on('click', '.'+this.options.strengthButtonClass, function(e) {
e.preventDefault();
thisclass = 'hide_'+$(this).attr('class');
if (isShown) {
$('input[type="text"][data-password="'+thisid+'"]').hide();
$('input[type="password"][data-password="'+thisid+'"]').show().focus();
$('a[data-password-button="'+thisid+'"]').removeClass(thisclass).html(strengthButtonText);
isShown = false;
} else {
$('input[type="text"][data-password="'+thisid+'"]').show().focus();
$('input[type="password"][data-password="'+thisid+'"]').hide();
$('a[data-password-button="'+thisid+'"]').addClass(thisclass).html(strengthButtonTextToggle);
isShown = true;
}
});
},
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin( this, options ));
}
});
};
})( jQuery, window, document );
Note: Must include the links given below in your html file
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="checkpswrdStrength.js"></script>
0 Comment(s)