Select Page

Simple Javascript Password Validation

Apr 9, 2019 | Development

Note: I originally wrote this blog post in March of 2012. For the most part, this is the same content, though I have updated and expanded it a bit. In modern times,  we use a CMS or some sort of framework that has a built-in password validation. However, there are still plenty of occasions where you’ll build a registration or password reset page where you need to check that the user has entered the correct password prior to submitting the page. This simple Javascript Tutorial will show you how to do just that.

Let’s start by looking at what our script will need to do.

Steps to Password Validation

Get The Input Elements
The first step will be to grab the input elements and store them into variables. This will allow us to work with the inputs throughout the script.

Capturing The Event
We want to check the values of the inputs every time someone releases a key in one of the input boxes. Once we’ve captured the event, we can compare the values of the two input boxes and ensure that they match.

Update the UI
Lastly, we want to give the user visual indication of whether the passwords match.

We’ll look at validating the password using vanilla JavaScript and also doing it with jQuery.

Vanilla Javascript (no framework used)

Using the onkeyup event, we can check what the user has entered in both fields and confirm that they have typed the same thing twice and visually confirm to the user that there is no problem with his password.

Here is a simple example:

Here is the code for that example:

<style>
.tutorial-wrapper{
width: 100%;
}
.tutorial-wrapper form{
background-color: #ffc;
border: 1px solid #cc9;
padding: 10px;
font-family: verdana;
width: 75%;
font-size: 1em;
}
.field-wrapper{
margin: 2px 0 2px 0;
padding: 0;
}
.tutorial-wrapper label{
float: left;
text-align: right;
margin: 0 5px 0 0;
width: 30%;
}
.tutorial-wrapper input{
width: 200px;
border: 1px solid #cc9;
}
.confirm-message{
margin: 0;
padding: 0;
font-size: .8em;
}
</style>
<script type="text/javascript">
function checkPass()
{
//Store the password field objects into variables ...
var password = document.getElementById('password2');
var confirm = document.getElementById('confirm2');
//Store the Confirmation Message Object ...
var message = document.getElementById('confirm-message2');
//Set the colors we will be using ...
var good_color = "#66cc66";
var bad_color = "#ff6666";
//Compare the values in the password field
//and the confirmation field
if(password.value == confirm.value){
//The passwords match.
//Set the color to the good color and inform
//the user that they have entered the correct password
confirm.style.backgroundColor = good_color;
message.style.color = good_color;
message.innerHTML = '<img src="/wp-content/uploads/2019/04/tick.png" alt="Passwords Match!">';
}else{
//The passwords do not match.
//Set the color to the bad color and
//notify the user.
confirm.style.backgroundColor = bad_color;
message.style.color = bad_color;
message.innerHTML = '<img src="/wp-content/uploads/2019/04/publish_x.png" alt="Passwords Do Not Match!">';
}
}
</script>
<div class="tutorial-wrapper">
<form>
<div class="field-wrapper">
<label for="password2">Password:</label>
<input type="password" name="password" id="password2" onkeyup="checkPass();">
</div>
<div class="field-wrapper">
<label for="confirm2">Confirm Password:</label>
<input type="password" name="confirm" id="confirm2" onkeyup="checkPass();">
<span id="confirm-message2" class="confirm-message"></span>
</div>
</form>
</div>
view raw js-pass1.html hosted with ❤ by GitHub

As you can see, the Javascript is short and simple. It follows the plan of what we wanted to do and, even with comments, it’s only 28 lines long.

Now let’s look at doing the same thing with jQuery.

jQuery

The principle is the same, and it will function just like the one above, but the code looks a lot different:

<script type="text/javascript">
$(function(){
$('#jq-password [type="password"]').keyup(function(){
//Store the field objects into variables ...
var password = $('#password3');
var confirm = $('#confirm3');
var message = $('#confirm-message3');
//Set the colors we will be using ...
var good_color = "#66cc66";
var bad_color = "#ff6666";
if(password.val() == confirm.val()){
confirm.css('background-color', good_color);
message.css('color', good_color).html("Passwords Match!");
} else {
confirm.css('background-color', bad_color);
message.css('color', bad_color).html("Passwords Do Not Match!");
}
});
});
</script>
<div class="tutorial-wrapper">
<form id="jq-password">
<div class="field-wrapper">
<label for="password2">Password:</label>
<input type="password" name="password" id="password3">
</div>
<div class="field-wrapper">
<label for="confirm2">Confirm Password:</label>
<input type="password" name="confirm" id="confirm3">
<span id="confirm-message3" class="confirm-message"></span>
</div>
</form>
</div>
view raw js-pass2.html hosted with ❤ by GitHub

You can see that we wrap the script in the jQuery document.ready function (using the shorthand version) and rather than putting a keyup event in the HTML form, we tell jQuery to watch for the keyup event.

I like this approach better because it separates all of the logic from the HTML. If you ever want to change which inputs are checked or remove the validation completely, you only have one place to edit.

Extending the Script

There’s a lot that you could do to extend the functionality of this simple script.

Changing the colors is a great visual identifier for the user, but for added security, the script could be extended to disable the form submit button or alert the user before they submit the form if the passwords do not match. The script and form could also be changed to use images for the confirmation rather than text. For example:

Overall, this is a very simple way to give the user feedback that their passwords match. However, you should still be doing server-side validation to make sure the password and confirm do, indeed, match.

I hope you found this bit of information useful … go forth and code.

Share This