Reduce invalid password error by Show password option

When user tries to login from mobile device or tablet there is more possibility for typo mistake. With password field user not able to view whether inputted password value is right or wrong. As result user face wrong password error message.

“Show password” option in login form is good user interface feature. By this option user able to view typed password and correct inputted password value if anything wrong found. Show password option can be added by icon or text near password field.

Show password option example:

For login interface only two changes require, first one to add ID to password field which will we use in js code for change password field type. second one is add “Show password” option for user, by clicking this option user can view inputted password.


Show

HTML code for password field:

You need to add ID to password field and “Show” option link after field

<input id="passField" type="password" name="password"/>
<a id="showPass" href="javascript:;">Show</a>

jQuery code for show password option:

For handling view password command we just need to check password field type and toggle field type based on current type.

$(function(){
    $('#showPass').click(function(){
        var passField = document.getElementById('passField');
    
	if(passField.type == 'text'){
            passField.type = 'password';
            $(this).text('Show');
        }else{
            passField.type = 'text';
            $(this).text('Hide');
        }
    });
});