"Login with Javascript Password Strenght"
Bootstrap 3.3.0 Snippet by uxengineer

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">
<div class="row">
<div class="col-md-6 col-md-offset-3 boxStyle" style="padding-right: 0px!important;padding-left: 0px!important;">
<div class="panel-body" style="padding-right: 4px!important;padding-left: 4px!important;">
<form method="post" name="challenge" class="form-horizontal" role="form" action="#" onSubmit="return submitForm()" AUTOCOMPLETE="off">
<fieldset class="landscape_nomargin" style="min-width: 0;padding: .35em .625em .75em!important;margin:0 2px;border: 2px solid silver!important;margin-bottom: 10em;">
<legend style="border-bottom: none;width: inherit;!important;padding:inherit;" class="legend">Password Reset Form</legend>
<div class="form-group">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12 text-center">
<span style="color: red">*</span> <span style="font-size: 8pt;">All fields are required</span>
</div>
</div>
<div class="form-group" style="margin-bottom: 0px;">
<div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
<div class="col-sm-8 col-md-8 col-lg-7 col-xs-10 mobilePad" id="message10" style="font-size: 10pt;padding-left: 0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
<div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 mobileLabel hidden" style="padding-top: 7px; text-align: right;">Username·<span style="color: red">*</span>:</div>
<div class="col-sm-10 col-md-10 col-lg-10 col-xs-10 input-group mobilePad">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>
<input style="border-radius: 4px!important;" type="text" class="form-control" name="username" id="username" placeholder="Username">
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
</div>
<div class="form-group">
<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
<div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 mobileLabel hidden" style="padding-top: 7px; text-align: right;">Your Email·<span style="color: red">*</span>:</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@media only screen and (max-device-width:540px) {
.mobileLabel{
text-align: left;
}
.mobilePad{
margin-left: 4em;
}
}
@media only screen and (max-device-width:750px) and
(orientation:landscape) {
.mobileLabel{
text-align: left;
}
.mobilePad{
margin-left: 11%;
}
}
.boxStyle{
margin-left: 20%;width: 60%;
}
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() {
$("#view_button3").bind("mousedown touchstart", function() {
$("#password").attr("type", "text");
}), $("#view_button3").bind("mouseup touchend", function() {
$("#password").attr("type", "password");
}), $("#view_button4").bind("mousedown touchstart", function() {
$("#verifypassword").attr("type", "text");
}), $("#view_button4").bind("mouseup touchend", function() {
$("#verifypassword").attr("type", "password")
})
});
function passwordChecker(){
$('#verifypassword').val('');
$('#message1').html(''); $('#message8').html(''); $('#message10').html('');
$('#message').html('');$('#message2').html('');$('#message3').html('');$('#message4').html('');$('#message5').html('');$('#message6').html('');$('#message7').html('');
if($('#password').val().length>=4){
if(newValPassPoilcy()===true ){
$('#message').css('color','green');
$('#message').html('Although looks like a good password, try to make it more stronger');
if($('#password').val().length>=9){
$('#message').html('');
$('#message1').html('');
}
return true;
}
}
}
function NumAndWordRep(){
var password = $('#password').val().toLowerCase();
if(password.match(/(.)\1\1/)){
// alert("Your Password cannot contain Character or Number repetition");
$('#message7').css('color','red');
$('#message7').html('Your Password cannot contain Character or Number repetition.');
return false;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: