Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Łukasz Czuliński
Łukasz Czuliński
8,646 Points

jQuery password exercise: something wrong in my code.

Hi folks.

I've been following along nicely with Andrew's password confirmation exercise. However, when I try to make my own addition to the password form it doesn't work. There must be something simple that I'm missing but I can't crack it.

Here's the html section I'm manipulating:

        <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password">
            <span>Enter a password longer than 8 characters</span>
        </p>

        <p>
            <label for="confirm_password">Confirm Password</label>
            <input id="confirm_password" name="confirm_password" type="password">
            <span>Please confirm your password</span>
            <span>Passwords match!</span>
        </p>

And here's my erroneous function:

function confirmPassword(){
    if($(this).val() === $('#password').val()){
        $(this).last().show();
        $(this).next().hide();

    }else{
        $(this).next().show();
    }   
}

$("#confirm_password").focus(confirmPassword).keyup(confirmPassword);

Everything in the function works properly except for the:

        $(this).last().show();

I don't understand why it's not showing the <span>Passwords match!</span>. Any ideas what I'm doing wrong here?

6 Answers

Paolo Scamardella
Paolo Scamardella
24,828 Points

Good tip for debugging jQuery is to use the console. console.log($(this).next()); or console.log($(this).last()) and so on and will show you the element that you are grabbing.

Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

I haven't touched jQuery in a long time, but to fix your issue, you could use $(this).next().next().show() and not $(this).last().show() because it gets the <span>Please confirm...</span> element instead of the last one.

Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

Where is this $("#password") element?

Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Sorry! I just added some more of the html to be clearer.

Łukasz Czuliński
Łukasz Czuliński
8,646 Points
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Thanks so much Paolo!

I'm still unclear as to why the .last() function wasn't working, since the jQuery API seemed to define it as just what I need.

In any case, I played around in the console and found that it wasn't grabbing the last span for some reason. Your method of .next().next() worked like a charm.

Paolo Scamardella
Paolo Scamardella
24,828 Points
Paolo Scamardella
Paolo Scamardella
24,828 Points

Without looking at the documentation, I believe the last() function targets the last child element in the parent element. For example, html<pid="#p"><span>One</span><spa2>Two</span2></paragraph>, and if you do $("#p").last() it will grab the <span>Two</span> element. The way you were doing it, $(this).last() (which is the confirmation password element), it does not have any child elements and you cannot use the last() function. If this is correct, you could try to grab your second paragraph element and use the last() function.

Łukasz Czuliński
Łukasz Czuliński
8,646 Points
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Yep, I read the documentation closer and saw where I went wrong. I was assuming that .last() was a sibling target like .next().