JQuery password validations

This tutorial is about to Jquery password validations. We will see how to check password strength by jquery script which will give you strong and effective password. While entering password i have added different rules to validate password like minimum characters, uppercase and lowercase, number and special characters should be present in password and according to this it will display its strength.

Jquery password validations

Jquery password validations

Validation rules to check password strength

1. Check if password length is less than 6 characters then it will show “Very week” password message.

2. Check if password length is greater than 7 characters then it will show “Week” password message.

3. Check if password has upper and lower characters then it will show “Medium” password message.

4. Check if password has upper and lower characters and numbers then it will show “Good” password message.

5. Check if password has at least one special character then it will show “Strong” password message.

Basically it will show validation message according to each rule.

HTML

We have taken one label, input type text field and one span to show validation message.

<div class="form-field">
    <label>Password : </label>
    <input type="password" name="password" class="password">
    <span class="password_strength"></span>
  </div>

Jquery

1. First we are validating field on keyup event of input. So whenever user type anything, on each keyup event it will validate that field and show message according to its status.

2. We are initializing one variable password_strength as 0. As per this variable value we will decide which message should be display.

3. Check if value is less than 6 then remove all other classes and add “.veryweek” class.

4. Now we are checking each validation rule if different if conditions and increasing password_strength variable value.

5. And last we are applying and removing classes according to password_strength variable value and this classes has different colors css to show validation message according to it. Let’s have a look into the code now.

$(document).ready(function() {
     $(".password").on("keyup", function(){ 
            //set password strength 0
            var password_strength = 0;
            //check if password length is less than 6 characheter
            if ($(this).val().length < 6) { 
            	$(".password_strength")
            	.removeClass("strength_week strength_medium strength_good strength_strong")
            	.text("Very Week")
            	.addClass('strength_veryweek');
            	return false;
            }
            //check if password length is greater than 7 charachter
            if ($(this).val().length > 7) { password_strength += 1;}
            //check if password has upper and lower charachters
            if ($(this).val().match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { password_strength += 1; }
            //check if password has upper and lower charachters and numbers
            if ($(this).val().match(/([a-zA-Z])/) && $(this).val().match(/([0-9])/)) { password_strength += 1; }
            //check if password has one special charachters
            if ($(this).val().match(/([!,%,&,@,#,$,^,*,?,_,~])/)) { password_strength += 1; }
            //check if password has two special charachters
            if ($(this).val().match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/)) { password_strength += 1; }
            //check and set strength text according password strength value
            if (password_strength == 1 ) { 
            	$(".password_strength")
            	.removeClass("strength_veryweek strength_medium strength_good strength_strong")
            	.text("Week")
            	.addClass('strength_week'); 
            } 
            else if (password_strength == 2 ) { 
            	$(".password_strength")
            	.removeClass("strength_week strength_veryweek strength_good strength_strong")
            	.text("Medium")
            	.addClass('strength_medium'); 
            } 
            else if (password_strength == 3 ) { 
            	$(".password_strength")
            	.removeClass("strength_week strength_medium strength_veryweek strength_strong")
            	.text("Good")
            	.addClass('strength_good'); 
            }
            else if (password_strength == 4 ) { 
            	$(".password_strength")
            	.removeClass("strength_week strength_medium strength_good strength_veryweek")
            	.text("Strong")
            	.addClass('strength_strong'); 
            }
            
            // you can check password strength in console
            console.log(password_strength);
     });
});

CSS

.form-field {
    width: 240px;
    float: left;
    padding: 15px;
    box-sizing: border-box;
    background-color:#f2f2f2;
    border-color:1px solid #ccc
  }
  .password_strength {
    border: 1px solid #ccc;
    padding: 5px;
    float: left;
    clear: left;
    width: 210px;
    box-sizing: border-box;
    border-top: 0;
    text-align: center;
    font-weight: bold;
    display: none;
  }
  .form-field label {
    width: 100%;
    float: left;
    margin-bottom: 5px;
  }
  .form-field input.password {
    width: 210px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 15px;
    float: left;
  }
  .strength_veryweek{
    border-color: #e35b5b;
    background-color: #f1adad;
    display: block;
  }
  .strength_week{
    border-color: #f78b53;
    background-color: #fbc5a9;
    display: block;
  }
  .strength_medium{
    border-color: #ffc733;
    background-color: #ffe399;
    display: block;
  }
  .strength_good{
    border-color: #90EE90;
    background-color: #98FB98;
    display: block;
  }
  .strength_strong{
    border-color: #83c373;
    background-color: #c1e1b9;
    display: block;
  }

Conclusion

In this tutorial we have cover different Jquery password validation rules which is showing status/message like very week, week, medium, good, strong as per password strength. In future post we will see some more jquery and other tutorials. So stay connected with my blog to get useful stuff in simple manner, and i will be more happy to get some feedback from you in comment section, and also share this post if you like if it is useful for others. Thanks.

Codepen Link : Click Here

Leave a Reply

Your email address will not be published. Required fields are marked *