[Resolved] How to use another field as password?

[Author]

Posts

[StanleyT8485]

Tell us what you are trying to do?

I want to use another field as the password when creating an account.

OR just show the password instead of ****.

The final goal here is to show the password to the user.

[Nigel]

HTML password fields don't have the option to display the characters, they are always hidden with asterisks.

To show the characters you need to change the input type from password to text.

You can only do that with JavaScript or jQuery on the front-end once the page is rendered, and you may want to include a toggle for visibility.

Something like: hidden link

[StanleyT8485]

Hi Nigel,

How can we do this without the toggle? We want to show the password by default.

[Nigel]

So you can add the following custom JS to the page which will simply convert password inputs to text inputs:

(function ($) {
    $(document).ready(function () {
        $('input[type="password"]').attr("type", "text");
    });
})(jQuery);

[StanleyT8485]

Hi Nigel,

It worked perfectly! At first, I got a syntax error but found out that you had to put it in the JS section of the form.

Thank you!

[StanleyT8485]

My issue is resolved now. Thank you!

[StanleyT8485]

Hey Nigel,

Sorry. One thing I found. If the user submit a wrong info (e.g.: an email that has already been used), the password will now be hidden after the page refresh.

How would you handle this?

[Nigel]

I assume you are submitting your form with ajax rather than a page refresh.

You can use a custom JS event fired by Forms when a validation problem occurs to add the same code that converts the password inputs to text inputs, e.g.

(function ($) {
    $(document).ready(function () {
        $('input[type="password"]').attr("type", "text");
    });

    $(document).on('js_event_cred_ajax_form_response_completed', function(event){
        $('input[type="password"]').attr("type", "text");
    });
})(jQuery);

[StanleyT8485]

Good work, Nigel. Thank you!