Bootstrap Snippet Bootstrap Password Length Checker and Viewer using HTML CSS Bootstrap jQuery

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="middle">
<div class="col-md-12">
      
        <form method="post" action="#" role="login">
<p style="color:white;">E-mail</p>
          <input type="email" name="email" placeholder="Email" required class="form-control input-lg" value="mailtomassnaveen@gmail.com" /><br>
<p style="color:white;">Password</p>          
          <input type="password" class="form-control input-lg" id="password" placeholder="Password" required="" />
          <span id="eye" style="display:none" data-click-state="1" class="glyphicon glyphicon-eye-open"></span>
          
          <div class="process" style="display:none"><p>·</p>
          <div class="progress">
  <div id="bar" class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 10%;">
    Poor·
  </div>
</div>
          </div>
          
          <br><br>
          <button type="submit" name="go" class="btn btn-lg btn-primary btn-block">Sign in</button>
         
         
          
        </form>
        
 
      </div>
      
  </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
body{
background:url("https://1.bp.blogspot.com/-QdtWby1gE2M/WIIfAKwWaoI/AAAAAAAABbI/W3IKzqJQ4ysz8Zs9gNu-ilHBhQ_GAAEbACLcB/s1600/bg.jpg") no-repeat;
background-size:cover;
}
body::before{
background-color: rgba(0, 0, 0, 0.37);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index:-1;
}
.middle{
width:445px;
height:395px;
background-color: rgba(0, 0, 0, 0.5);
margin-top:125px;
margin-left:325px;
border-radius:12px;
padding:56px;
}
#password{
padding-right:29px;
}
#eye{
font-size:125%;
cursor:pointer;
postion:absolute;
float:right;
margin-top:-31px;
margin-right:12px;
}
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(){
$("#password").keyup(function(){
var value = $("#password").val();
var strength = value.length;
if(strength > 0){
$(".process").show();
$("#bar").addClass("progress-bar-danger").html("poor") ;
$("#eye").show();
if(strength > 3){
$("#bar").removeClass("progress-bar-danger").removeClass("progress-bar-success").addClass("progress-bar-warning").css("width","30%").html("Weak ") ;
}if(strength > 6){
$("#bar").css("width","60%").html("Medium").removeClass("progress-bar-success").addClass("progress-bar-warning") ;
}
if(strength > 12){
$("#bar").removeClass("progress-bar-warning").addClass("progress-bar-success").css("width","100%").html("Strong ") ;
}
}else{
$("#bar").removeClass("progress-bar-warning").removeClass("progress-bar-success").addClass("progress-bar-danger").css("width","10%").html("poor ") ;
$("#eye").hide();
$(".process").hide();
}
});
$("#eye").click(function(){
if($(this).attr('data-click-state') == 1) {  
$(this).attr('data-click-state', 0).removeClass("glyphicon-eye-open").addClass("glyphicon-eye-close");
$("#password").attr('type','text');
} else {
$(this).attr('data-click-state', 1).removeClass("glyphicon-eye-close").addClass("glyphicon-eye-open");
$("#password").attr('type','password');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Password Length Checker and Viewer"
Bootstrap 3.3.0 Snippet by NaveenDA

Related: See More

Questions / Comments:

"Bootstrap Password Length Checker and Viewer" Bootstrap 3.3.0 Snippet by NaveenDA

Related: See More

Questions / Comments:

"Bootstrap Password Length Checker and Viewer"
Bootstrap 3.3.0 Snippet by NaveenDA