"Password Strength Popover"
Bootstrap 3.3.0 Snippet by SeanWessell

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
<h3>Registration</h3>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Username</label>
<div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" name="Username" id="Username" placeholder="Requested Username" required value="SeanWessell">
</div>
</div>
<div class="form-group">
<label>Email</label>
<div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" class="form-control" name="Email" id="Email" placeholder="Requested Email" required value="Sean.Wessell@gmail.com">
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="text" class="form-control" name="password" id="password" placeholder="Password" required data-toggle="popover" title="Password Strength" data-content="Enter Password...">
</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-resize-vertical"></span></span>
<input type="password" class="form-control" name="confirm" id="confirm" placeholder="Confirm Password" required>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-primary pull-right">
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.popover.primary {
border-color:#337ab7;
}
.popover.primary>.arrow {
border-top-color:#337ab7;
}
.popover.primary>.popover-title {
color:#fff;
background-color:#337ab7;
border-color:#337ab7;
}
.popover.success {
border-color:#d6e9c6;
}
.popover.success>.arrow {
border-top-color:#d6e9c6;
}
.popover.success>.popover-title {
color:#3c763d;
background-color:#dff0d8;
border-color:#d6e9c6;
}
.popover.info {
border-color:#bce8f1;
}
.popover.info>.arrow {
border-top-color:#bce8f1;
}
.popover.info>.popover-title {
color:#31708f;
background-color:#d9edf7;
border-color:#bce8f1;
}
.popover.warning {
border-color:#faebcc;
}
.popover.warning>.arrow {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
//minimum 8 characters
var bad = /(?=.{8,}).*/;
//Alpha Numeric plus minimum 8
var 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).
var 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).
var best = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{8,}$/;
$('#password').on('keyup', function () {
var password = $(this);
var pass = password.val();
var passLabel = $('[for="password"]');
var stength = 'Weak';
var pclass = 'danger';
if (best.test(pass) == true) {
stength = 'Very Strong';
pclass = 'success';
} else if (better.test(pass) == true) {
stength = 'Strong';
pclass = 'warning';
} else if (good.test(pass) == true) {
stength = 'Almost Strong';
pclass = 'warning';
} else if (bad.test(pass) == true) {
stength = 'Weak';
} else {
stength = 'Very Weak';
}
var popover = password.attr('data-content', stength).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement).removeClass('danger success info warning primary').addClass(pclass);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

It's bugged out when entering SPACE character

Krzysztof Trzos () - 7 years ago - Reply 0