Jquery if password field is empty

Question

I'm trying to add visible text to a password field that says "Enter a password" and on click the text is cleared and you type dots. I have two inputs one of type=text and another password. The password input is hidden from the start but appears after you click on the input with the "Enter a password" instruction.

It does this http://mudge.github.com/jquery_example/ but I'm trying to make it for password fields.

HTML

<input type="text" id="password_instructions" />
<input type="password" id="password" />

The Jquery

        var $password = $('#password');
        $password.hide(); //hide input with type=password

        $("#password_instructions").click(function() {
                $( this ).hide();
                $('#password').show();
                $('#password').focus();

                if ($password.val().length === 0) { //if password field is empty            
                    $password.focusout(function() { //when clicking outside empty password input
                        $( this ).hide();
                        $('#password_default_value').show();
                        $('#password_instructions').default_value('Enter a password'); //will clear on click
                    });                     
                }
        });

What doesn't work:

When you fill the password input (with dots appearing) and click out the input is hidden and the #password_instruction input shows. So it's not respecting the if empty statement. For some reason it treats the input as empty even if I typed a password in.

What am I doing wrong here?

Ah, I thought I read something about `.val()` in the new one but it was about `.attr()`. No worries. :) — Richard Marskell - Drackir, May 09 '11 at 19:53
Check this answer, it can help: https://stackoverflow.com/a/43185203/1770571 — Salma Gomaa, Sep 18 '17 at 11:11

score 9 · Accepted Answer · answered May 09 '11 at 19:51

You seem to be expecting that there's some kind of "pause" after you call focus() and that the remnant of the JS code will be executed only when the enduser is finished typing the password somehow.

This is not true. The function is been executed fully in one go.

You need to move the following piece

        if ($password.val().length === 0) { //if password field is empty            
            $password.focusout(function() { //when clicking outside password input
                $(this).hide();
                $('#password_default_value').show();
                $('#password_instructions').default_value('Enter a password'); //will clear on click
            });                     
        }

into another standalone function:

$('#password').focusout(function() {
    if ($(this).val().length === 0) { //if password field is empty            
        $(this).hide();
        $('#password_default_value').show();
        $('#password_instructions').default_value('Enter a password'); //will clear on click
    }
});

Thank you for the explanation! Maybe I related the code too much to php.. Your revision works! :) — CyberJunkie, May 09 '11 at 20:03

score 3 · Answer 2 · answered May 09 '11 at 19:53

3

Do you mean:

<input type="password" placeholder="enter password">

If you are wanting to implement this for legacy browsers, you'll have to move the check to the onBlur event. In jQuery this looks like:

$('#password').blur(function() {
    if ($password.val().length === 0) { //if password field is empty            
        $password.focusout(function() { //when clicking outside password input
            $( this ).hide();
            $('#password_default_value').show();
            $('#password_instructions').default_value('Enter a password'); //will clear on click
        });                     
    }
});

answered May 09 '11 at 19:53

Rich Bradshaw

71,795
44
182
241

1

Thanks! The code is a replacement for placeholder which I found out that doesn't work on Explorer :( – CyberJunkie May 09 '11 at 19:56
Ah, makes sense. A lot of people don't seem to be aware of placeholder, so thought I'd better let you know! – Rich Bradshaw May 09 '11 at 19:57
Thank you! I just found out about it in a previous question :) but as usual explorer makes it almost insignificant.. people should be educated to stop using explorer – CyberJunkie May 09 '11 at 20:00
1

If you use something like Modernizr with Modernizr.load you can make sure that users only download polyfills if they are needed. There is a list here https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills for bits of code like you are writing now for a plethora of features. – Rich Bradshaw May 09 '11 at 20:09
Modernizr is a great idea! Thanks for the link! – CyberJunkie May 09 '11 at 20:16

Jquery if password field is empty

2 Answers2