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 jQuery Basics (2014) Creating a Password Confirmation Form Perform: Part 1

Manish Giri
Manish Giri
16,266 Points
Posted by Manish Giri
Manish Giri
16,266 Points

Why does clicking/focusing on the password input reveal the hint

So, I'm somewhat confused by the "focus" event on the password input. What happens is that when you click/focus on the password input, the hint (ie the span element) next to it is shown up.

In the first line of the jQuery code, there's this statement that hides all the span elements in the form. 

$("form span").hide();

When all the span elements are hidden to begin with, how does clicking/focusing on the password input automatically reveal the hint?

Here's the relevant HTML:

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

1 Answer

Kristin Jones
Kristin Jones
12,217 Points
Kristin Jones
Kristin Jones
12,217 Points

Right after that bit of code, he adds another bit of code that checks on focus to see if the field is valid and then calls:

$(this).next().show();

if the field ISN'T valid - and what that bit of code does is take the "next" field after "this" (the form field that got focused) and show it (which reverses the hide()).

All of this bit shows up in the javascript right after the $("form span").hide();