How To Create A Show Password Button

In this tutorial we're going to have a quick look at how you can create a show password button on your register or login forms. When you're creating a register form it's best practice to have this form as small as possible, with one of the form fields used will be for passwords. There is a common trend when displaying a password field to display a confirm password field and make sure they match, this is to increase the chances of the user not entering the wrong password in the field from typos.

Another common trend instead of asking the user to confirm their password is to have a show/hide password button.

The problem with a password field is the reason why it's used...to hide the text on the screen so you can type your password into a textbox without anyone being able to see your password as you type. If you make a typo with your password you won't be able to tell. The show/hide password button when clicked will show the user what they've typed into the password which is essential changing the password field into a normal textbox.

Along with using this on your register form to help make sure users enter their password correctly you can also add this button to your login form to stop against typos in users password similar to how Mailchimp login page works.

Notice the checkbox next to the password field labelled show. When you click this it will display all the contents of the password field by switching the password field to a normal textbox, so let's look at how this is done.

Create The Login Form

First we need to create your basic login form.

<div class="container">
  <form action="" id="loginForm">
    <h2>Login</h2>
    <p><label for="username">Username</label><input type="text" name="username" id="username" placeholder="username" /></p>
    <p><label for="password">Password</label><input type="password" name="password" id="password" placeholder="password" /> <input type="button" id="showPassword" value="show" class="button" /></p>
    <p><input type="submit" value="Login" class="button" /></p>
  </form>
</div>

The styling of the form isn't that important as we're demoing the show/hide button for the password field so I won't show the CSS for the form, if you really want the styling I'll attach a codepen to the form at the bottom of the page.

jQuery For the Show Hide Button

With the form on the page we can create the jQuery needed switch the password field to a textbox. First we do the normal jQuery check to see that jQuery has loaded and it's ready to execute the code. Then we add a click event to the show password button, this button will be the same button for both show and hide of the password. Inside the click event of the button we need to get the password field and store this in a variable, then get the current type of the password field. Next we need to check what the current password field type is, if it's a password field then we need to change the field to a text field by using the attr() method.

passwordField.attr('type', 'text');

This will show the user password to them on the page so we will also need to change the show password button text from Show to Hide. Because this is happening inside the show password button click event we can use the keyword this to get the show password button.

$(this).val('Hide');

Next we can add the code to handle the event of hiding the password and changing the password field from a textbox to password. If the password field type is not a password then we can assume it's a text box, therefore we need to change the type to a password field by using the attr() method again.

passwordField.attr('type', 'password');

As we're now hiding the password we need to change the text on the show password button back to Show.

$(this).val('Show');

Here's the full code used for the show/hide password button.

// Check javascript has loaded
$(document).ready(function(){

  // Click event of the showPassword button
  $('#showPassword').on('click', function(){
    
    // Get the password field
    var passwordField = $('#password');

    // Get the current type of the password field will be password or text
    var passwordFieldType = passwordField.attr('type');

    // Check to see if the type is a password field
    if(passwordFieldType == 'password')
    {
        // Change the password field to text
        passwordField.attr('type', 'text');

        // Change the Text on the show password button to Hide
        $(this).val('Hide');
    } else {
        // If the password field type is not a password field then set it to password
        passwordField.attr('type', 'password');

        // Change the value of the show password button to Show
        $(this).val('Show');
    }
  });
});