Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to validate password strength using jQuery

This tutorial is about the Password strength checking which determines the easy way to show the strength of user password on the registration forms.

In this tutorial we will build a basic form field that will give instant response to the users about the password strength and our idea is to evaluate the password string every time a user enters a character. We will check the password strength using a few regular expressions with jQuery.

Displays the Password text field

Figure 1: Displays the Password text field

Calculating the Password Strength:

We need to think of some rules for the password, so that we can evaluate the password strength based on those rules.

So let’s add some basic rules, for example:

  • If password is less than 6 characters, don’t accept.
  • If the length of password is more than 6 characters, increase the strength value by +1.
  • If the password contains lower and uppercase characters, +1.
  • If the password contains characters and numbers, +1.
  • If the password contains one special character, +1.
  • If the password contains two special characters, +1.

Based on above rules, we can calculate the password strength value and return the feedback to the user. Initially the password strength value is 0 and for each rule it fulfills, its value is increased by 1. We can assume that if it fulfills at least two rules (ie. its value is 2), it is good password. If its value is less than 2, we assume it is a weak password and if its value is more than 2, it is a strong password.

Let’s start with the code.

Markup for the form:

Here is the basic HTML markup for the form having only one password field. The span #result contains the feedback of the password.

<form id="register">
    <label for="password">Password:</label>
    <input name="password" id="password" type="password"/>
    <span id="result"></span>
</form>

CSS Styling:

Basic CSS code for the form layout:

#register {
    margin-left:100px;
}
 #register label{
    margin-right:5px;
}
 #register input {
    padding:5px 7px;
    border:1px solid #d5d9da;
    box-shadow: 0 0 5px #e8e9eb inset;
    width:250px;
    font-size:1em;
    outline:0;
}
 #result{
    margin-left:5px;
}
 #register .short{
    color:#FF0000;
}
 #register .weak{
    color:#E66C2C;
}
 #register .good{
    color:#2D98F3;
}
 #register .strong{
    color:#006400;
}

We have defined CSS classes short, weak, good and strong to show the feedback messages in different colors.

The jQuery Code:

The jQuery code starts with following:

$(document).ready(function() {
    //Code here
});

Keyup event

We need to evaluate the password string as soon as the user enters characters in the password field. So we will use a keyup event for the password input field, which is triggered whenever the user pushes a key on the keyboard. It calls a function checkStrength by passing the password field value parameter, and appends the return value in the #result.

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

checkStrength Function

As we have used a function checkStrength above, let’s start that function:

function checkStrength(password){
    //Code here
}

Set the initial value 0 for the strength:

var strength = 0

Checking the password rules

Now let’s check if the first rule, if password length is less than 6 characters, we will just return the message that it’s too short. We want to display this error message in red font which we have defined in the css class .weak. So, we will remove any class attached to #result and add the css class .weak.

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

If the length is valid, we can continue to the next rule. As we have set the minimum requirement for the password 6 characters, so if the user password is 6 or 7 characters, we do not increase the strength value, but if it is more than 7 characters, we increase the strength of password by 1.

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

Now, check if the password contains lower and uppercase characters, increase its value by 1.

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

If it has one special character, increase strength value by 1:

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

If the password contains two special characters, increase strength value by 1 more:

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

Now we have calculated password strength value according to the above rules. We can return feedback messages according to the value. As we mentioned above that we will assume that password is weak if it has value less than 2. If it has value 2, it is good, and if it is more than 2, it is strong.

Following code checks if the strength is less than 2, it adds css class weak and returns the message ‘Weak’. Similarly, if the value is 2, it adds the css class good, and returns the message ‘Good’. If the value is more than two, it adds css class strong and returns the message ‘Strong’.

if (strength < 2 ) {
    $('#result').removeClass()	
    $('#result').addClass('weak')
    return 'Weak'
} else if (strength == 2 ) {
    $('#result').removeClass()
    $('#result').addClass('good')
    return 'Good'
} else {
    $('#result').removeClass()
    $('#result').addClass('strong')
    return 'Strong'
}

This is complete now and you can see the full jQuery code below:

$(document).ready(function() {
 
    $('#password').keyup(function(){
        $('#result').html(checkStrength($('#password').val()))
    })  
 
    function checkStrength(password){
 
    //initial strength
    var strength = 0
 
    //if the password length is less than 6, return message.
    if (password.length < 6) {
        $('#result').removeClass()
        $('#result').addClass('short')
        return 'Too short'
    }
 
    //length is ok, lets continue.
 
    //if length is 8 characters or more, increase strength value
    if (password.length > 7) strength += 1
 
    //if password contains both lower and uppercase characters, increase strength value
    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
 
    //if it has numbers and characters, increase strength value
    if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 
 
    //if it has one special character, increase strength value
    if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1
 
    //if it has two special characters, increase strength value
    if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,",%,&,@,#,$,^,*,?,_,~])/)) strength += 1
 
    //now we have calculated strength value, we can return messages
 
    //if value is less than 2
    if (strength < 2 ) {
        $('#result').removeClass()
        $('#result').addClass('weak')
        return 'Weak'
    } else if (strength == 2 ) {
        $('#result').removeClass()
        $('#result').addClass('good')
        return 'Good'
    } else {
        $('#result').removeClass()
        $('#result').addClass('strong')
        return 'Strong'
    }
}
});

Conclusion

We have come to the end of this tutorial and have used only a few basic criteria so as to evaluate password strength.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login