Password forms are challenging for users because we often ask them to enter complex strings which they are usually not allowed to see. Additionally, these strings have to meet different criteria – like having upper and lower case characters, numbers and so on – to keep our applications secure.

In this post, we are going to add visual queues to a form that will allow users to get a better experience with passwords.

The following image displays our initial screen. As you can see, despite it is very clean, it does not give any feedback or hints about how passwords are expected.

Step 1. Adding some instructions

We will start by adding some instructions so that users understand the required password complexity. They are added as a simple unsorted list in a new bootstrap column.

<li id="pwd-restriction-length">Be between 10-16 characters in length</li>
<li id="pwd-restriction-upperlower">Contain at least 1 lowercase and 1 uppercase letter</li>
<li id="pwd-restriction-number">Contain at least 1 number (0–9)</li>
<li id="pwd-restriction-special">Contain at least 1 special character (!@#$%^&()'[]"?+-/*)</li>

Step 2. Validating password requirements

It is time to add some javascript. What we need to do is to capture the keyup event in each of the password fields. This way we will be able to evaluate the input as the user types and update the styles on the instructions list.

$(document).ready(function() {
    $('#password').keyup(function () {
        // ...
    });
});

We are going to evaluate using regular expressions, which according to w3schools are compatible across all main browsers.

Our regular expression should allow us to:

• Expect a password length between 10 and 16 characters: 10,16
• Expect at least one lowercase character: a-z
• Expect at least one uppercase character: A-Z
• Expect a number: 0–9
• Expect at least one special character: !@#$%^&()’[]”?+-/*

In order to use a regular expression you have to create a pattern and then check if a string matches that pattern. In our example, we are going to create a set of patterns from the list of items that we are expecting to receive.

var pwdLength = /^.{10,16}$/;
var pwdUpper = /[A-Z]+/;
var pwdLower = /[a-z]+/;
var pwdNumber = /[0-9]+/;
var pwdSpecial = /[!@#$%^&()'[\]"?+-/*={}.,;:_]+/;

If you are not familiar with regular expressions, you can see that they use some special syntax. Do not worry about it, just bear with me.

Then we are going to test a string against the regular expression to see if it matches. Javascript makes this easy, we just have to call the test function which returns a simple true or false.

pwdLength.test( $('#password').val() )

If the password matches our regular expression, then we are going to add a css class to the corresponding element in the list. If it does not, then we will remove the css class from that same element.

var s = $('#password').val(); // get the current password value

if (pwdLength.test( s )) {
    $('#pwd-restriction-length').addClass('pwd-restriction-checked');
} else {
    $('#pwd-restriction-length').removeClass('pwd-restriction-checked');
}

pwd-restriction-checked is the name of the css class that we are applying to the list item. By using styles we can easily add or remove css to each list item.

We are going to repeat this same principle to the rest of the regular expressions.

var s = $('#password').val();

if (pwdLength.test(s)) {
    $('#pwd-restriction-length').addClass('pwd-restriction-checked');
} else {
    $('#pwd-restriction-length').removeClass('pwd-restriction-checked');
}
if (pwdUpper.test(s) && pwdLower.test(s)) {
    $('#pwd-restriction-upperlower').addClass('pwd-restriction-checked');
} else {
    $('#pwd-restriction-upperlower').removeClass('pwd-restriction-checked');
}
if (pwdNumber.test(s)) {
    $('#pwd-restriction-number').addClass('pwd-restriction-checked');
} else {
    $('#pwd-restriction-number').removeClass('pwd-restriction-checked');
}
if (pwdSpecial.test(s)) {
    $('#pwd-restriction-special').addClass('pwd-restriction-checked');
} else {
    $('#pwd-restriction-special').removeClass('pwd-restriction-checked');
}

First goal done. By now we have a form that gives us feedback as we type in the password field. Let’s now add a match/no-match check for the confirm-password field.

Step 3. Validating that passwords match

To accomplish this we are going to use the keyup event again. But this time we have to compare the contents of the second box to the first one.

function updatePasswordsMatchLabel() {
    if ($('#password').val() == $('#confirm-password').val()) {
        $('#password-match-label').text('Super! Your passwords match');
    } else {
        $('#password-match-label').text('Your passwords do not match');
    }
}
    
$('#confirm-password').keyup(function () {
    updatePasswordsMatchLabel();
});

As you can see we have created a function to update the password-match-label indicating the user whether the passwords match or not. The function is called everytime a keyup event is triggered. We are doing it with a function because we have to be able to update the label contents in case the user decides to go back to the main password field and change it.

As a final step, we have to add a call to the updatePasswordsMatchLabel function from our first keyup event as well. This is to deal with the scenario where the user goes back to the first password field and modifies it.

// If we are already displaying some text, then we have to update it
if ($('#password-match-label').text().length > 0) {
    updatePasswordsMatchLabel();
}

The final result looks like the following image. Have a look at the working demo and its source code.

Conclusion

Hints can be very helpful when users are required to enter a complex password in a website. It allows them to validate their entries before submitting the form, making the process faster and more efficient for both the user and the remote server.