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 Perfect

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

Understanding the logic behind the very confusing method chaining

I understood everything so far, except the two lines where Andrew tacked on one event after another on the two lines by selecting the password and confirm password inputs. I really don't understand how this makes the project "very readable" as he keeps stressing about.

Here are the two lines: 

$("#password").focus(checkPassword).keyup(checkPassword).focus(checkPasswordConfirmation).keyup(checkPasswordConfirmation).keyup(enableSubmitButton);
$("#confirm_password").focus(checkPasswordConfirmation).keyup(checkPasswordConfirmation).keyup(enableSubmitButton);

For each of these, I was able to keep track of the first two events - focus and keyup. But then he just kept adding on these events repeatedly, and I lost track of everything.

Can anyone help me understand?

2 Answers

Kristin Jones
Kristin Jones
12,217 Points

I find it helpful to think of method chaining in terms of "with this element do 'all this stuff'". I do find that it helps me keep everything sorted in my head if I break the chain up so it displays each part of the 'stuff' on a separate line.

$("#password").focus(checkPassword)
              .keyup(checkPassword)
              .focus(checkPasswordConfirmation)
              .keyup(checkPasswordConfirmation)
              .keyup(enableSubmitButton);

$("#confirm_password").focus(checkPasswordConfirmation)
                      .keyup(checkPasswordConfirmation)
                      .keyup(enableSubmitButton);
David Drysdale
David Drysdale
10,815 Points
David Drysdale
David Drysdale
10,815 Points

I am not sure if this will help or not, but basically this is what is happening:

  1. When the field #password gets focus, run the checkPassword function to see if the tip should be displayed.
  2. After every key push in #password, run checkPassword to see if the tip should be displayed.

That was the first iteration; then, Andrew added a check to make sure that if the user enters a password, enters a matching confirmation, and then changes the first password, the system still provides the correct tip. So:

  1. When check confirmation gets focus, run the checkPasswordConfirmation function to see if the tip should be displayed.
  2. After each keypress in the confirmation, run the checkPasswordConfirmation function

Finally, we want to know if the submit button should be disabled, so he added

  1. After every key press, check if the conditions are true to enable the submit button.

Basically, it is a series of checks that take place based on user behaviour to determine whether the tips should display or not and whether the submit button should be enabled or not.