CODEWITHSUNDEEP
javascripthtmlcss
Nag
Nag

Reputation: 956

Password Strength Checker

i have a problem with my Password Strength checker. Color of the result doesn't change according to the strength of the password. I guess i have problem with "addClass" in javascript. Here is the code...

html:

  <!DOCTYPE HTML>
   <html>
     <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <script src="jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />     
     <script src="script.js"></script>      
   </head>

    <body>
    <div id="container">
        <div id="content">  
            <form name="pass_strength">
            <p><label for="username">Username : </label>
                <input type="text" name="username" class="input"/>
            </p>
            <p><label for="password">Password : </label>
                <input type="password" name="password" id="password" class="input" />
                <span id="result"></span> 
           </p>
            </form>     
        </div>

       </div>
    </body>
</html>

css:

      body
      { background-color:#CCC;}

    #container
     {
    width:20%;  
    background-color:#000;
    margin:0 auto;
    border:5px solid #FFF;
   margin-top:150px;
   }
   #content
   {
     padding:10px;
     border: 2px solid rgb(105, 91, 91);
     box-shadow: 2px 2px 10px #FFF;
     background: #CCC;
    }
 .input
 {
  margin:10px;
 }


 #result
 {
    color:#F00;
    text-shadow:#666;
 }

 a
 {
    color:#000;
 }

.red{color:red;}
.orange{color:orange;}
.green{color:green;}

JS:

  $(document).ready(function() {

  $('#password').keyup(function(){
    $('#result').html(checkStrength($('#password').val()))
  })    

  function checkStrength(password){

  var strength = 0

  if (password.length < 6) { 
    $('#result').removeClass()
    $('#result').addClass('short green')
    return 'Too short' 
   }

  if (password.length > 7) strength += 1

  if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1

  if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 

  if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1

  if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1


if (strength < 2 ) {
    $('#result').removeClass()
    $('#result').addClass('weak')
    $('#result').addClass('green')
    return 'Weak'           
} else if (strength == 2 ) {
    $('#result').removeClass('green')
    $('#result').addClass('orange')
    return 'Good'       
} else {
    $('#result').removeClass('red')
    $('#result').removeClass('orange')
    $('#result').addClass('strong','green')
    return 'Strong'
}
}
});

Upvotes: 0

Views: 3733

Answers (3)

Umesh Shende
Umesh Shende

Reputation: 83

i have found this it may help you i have implement using javascript 

function password_validate(txt) {
  var val1 = 0;
  var val2 = 0;
  var val3 = 0;
  var val4 = 0;
  var val5 = 0;
  var counter, color, result;
  var flag = false;
  if (txt.value.length <= 0) {
    counter = 0;
    color = "transparent";
    result = "";
  }
  if (txt.value.length < 8 & txt.value.length > 0) {
    counter = 20;
    color = "red";
    result = "Short";
  } else {
    document.getElementById(txt.id + "error").innerHTML = " ";
    txt.style.borderColor = "grey";
    var regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
    //  document.getElementById("pass_veri").style.display="block";
    var fletter = /[a-z]/;
    if (fletter.test(txt.value)) {
      val1 = 20;

    } else {
      val1 = 0;
    }
    //macth special character
    var special_char = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
    if (special_char.test(txt.value)) {
      val2 = 30;
    } else {
      val = 0;
    }
    /*capital_letter*/
    var cap_lett = /[A-Z]/;
    if (cap_lett.test(txt.value)) {
      val3 = 20;
    } else {
      val = 0;
    }
    /*one numeric*/
    var num = /[0-9]/;
    if (num.test(txt.value)) {
      val4 = 20;
    } else {
      val4 = 0;
    }
    /* 8-15 character*/
    var range = /^.{8,50}$/;
    if (range.test(txt.value)) {
      val5 = 10;
    } else {
      val5 = 0;
    }
    counter = val1 + val2 + val3 + val4 + val5;

    if (counter >= 30) {
      color = "skyblue";
      result = "Fair";
    }
    if (counter >= 50) {
      color = "gold";
      result = "Good";
    }
    if (counter >= 80) {
      color = "green";
      result = "Strong";
    }
    if (counter >= 90) {
      color = "green";
      result = "Very Strong";
    }
  }
  document.getElementById("prog").style.width = counter + "%";
  document.getElementById("prog").style.backgroundColor = color;
  document.getElementById("result").innerHTML = result;
  document.getElementById("result").style.color = color;
}
		body {
		  font-family: 'Rajdhani', sans-serif;
		  background-color: #E4E4E4;
		}
		/* tooltip*/
		
		.hint {
		  width: 258px;
		  background: red;
		  position: relative;
		  -moz-border-radius: 10px;
		  -webkit-border-radius: 10px;
		  border-radius: 10px;
		  position: absolute;
		  left: 0px;
		  border: 1px solid #CC9933;
		  background-color: #FFFFCC;
		  display: none;
		  padding: 20px;
		  font-size: 11px;
		}
		
		.hint:before {
		  content: "";
		  position: absolute;
		  left: 100%;
		  top: 24px;
		  width: 0;
		  height: 0;
		  border-top: 17px solid transparent;
		  border-bottom: 1px solid transparent;
		  border-left: 22px solid #CC9933;
		}
		
		.hint:after {
		  content: "";
		  position: absolute;
		  left: 100%;
		  top: 26px;
		  width: 0;
		  height: 0;
		  border-top: 14px solid transparent;
		  border-bottom: 1px solid transparent;
		  border-left: 20px solid #FFFFCC;
		}
		
		.parent {
		  position: relative;
		}
		
		.progress {
		  height: 7px;
		}
		
		#progres {
		  display: block;
		}
		
		p {
		  margin: 0px;
		  font-weight: normal;
		}
		
		.form-control {
		  width: none;
		  margin-left: 260px;
		  margin-top: 25px;
		  width: 200px;
		}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-lg-12 parent ">
  <label class="hint" id="pass-hint">
    Password Strength:<span id="result"></span>
    <br>
    <div class="progress" id="progres">
      <div class="progress-bar progress-bar-danger" role="progressbar" id="prog">
      </div>
    </div>
    <p> passowrd must have atleast 8 charatcer</p>
  </label>
  <input type="password" class="form-control" data-toggle="tooltip" data-placement="left" id="pass" onfocus="document.getElementById('pass-hint').style.display='block'" onblur="document.getElementById('pass-hint').style.display='none'" placeholder="**********"
  oninput="password_validate(this);document.getElementById('progres').style.display='block';">
  <i class=" form-control-feedback" id="passsuccess" aria-hidden="true"></i>
  <span id="passerror" class="help-block error"></span>
</div>

Upvotes: 1

Domain
Domain

Reputation: 11808

You have provided color to id of span element.Id attribute has an highest priority than class attribute so the color is not assigned to the result.

You can add class to the <span> element and give color to that class.

You can see demo here http://jsfiddle.net/tenigada/RH8f6/575/

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32142

Used to this 

 #result.red{color:red;}
 #result.orange{color:orange;}
 #result.green{color:green;}

Because you used to ID and than apply to class css but id is more power than class than used to with ID and class this css.

Demo code

$(document).ready(function() {

  $('#password').keyup(function(){
    $('#result').html(checkStrength($('#password').val()))
  })    

  function checkStrength(password){

  var strength = 0

  if (password.length < 6) { 
    $('#result').removeClass()
    $('#result').addClass('short green')
    return 'Too short' 
   }

  if (password.length > 7) strength += 1

  if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1

  if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 

  if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1

  if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1


if (strength < 2 ) {
    $('#result').removeClass()
    $('#result').addClass('weak');
    $('#result').addClass('green');
    return 'Weak'           
} else if (strength == 2 ) {
    $('#result').removeClass('green');
    $('#result').addClass('orange');
    return 'Good'       
} else {
    $('#result').removeClass('red');
    $('#result').removeClass('orange');
    $('#result').addClass('strong green');
    return 'Strong'
}
}
});
  body
      { background-color:#CCC;}

    #container
     {
    width:20%;  
    background-color:#000;
    margin:0 auto;
    border:5px solid #FFF;
   margin-top:150px;
   }
   #content
   {
     padding:10px;
     border: 2px solid rgb(105, 91, 91);
     box-shadow: 2px 2px 10px #FFF;
     background: #CCC;
    }
 .input
 {
  margin:10px;
 }


 #result
 {
    color:#F00;
    text-shadow:#666;
 }

 a
 {
    color:#000;
 }

 #result.red{color:red;}
 #result.orange{color:orange;}
 #result.green{color:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE HTML>
   <html>
     <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <script src="jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />     
     <script src="script.js"></script>      
   </head>

    <body>
    <div id="container">
        <div id="content">  
            <form name="pass_strength">
            <p><label for="username">Username : </label>
                <input type="text" name="username" class="input"/>
            </p>
            <p><label for="password">Password : </label>
                <input type="password" name="password" id="password" class="input" />
                <span id="result"></span> 
           </p>
            </form>     
        </div>

       </div>
    </body>
</html>

Upvotes: 0

Related Questions