Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Create a Show Password Button

DZone's Guide to

How to Create a Show Password Button

Interested in adding functionality to show password on your login form? Paul Underwood provides a quick how-to tutorial.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

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 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 that 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 essentially 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 prevent typos in a user's password similar to how the Mailchimp login page works.

mailchimp-login

Notice the checkbox next to the password field labelled "show". When you click this, it will display all of 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.

login-form-demo

<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 necessary to 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 showing and hiding 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's 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');
    }
  });
});

Below is the attached codepen used for this demo.

See the Pen Myprbq by Paul (@paulund) on CodePen.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
web design and web development ,javascript ,jquery ,passwords

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}