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 2

Paul Neumyer
Paul Neumyer
15,301 Points
Posted by Paul Neumyer
Paul Neumyer
15,301 Points

Code is exact same....yet the confirmation field does not show up

I can't get the confirmation password span element to show up when the first password field is in focus. Here is my code: 

//PROBLEM: HINTS ARE SHOWN EVEN WHEN FORM IS VALID

//SOLUTION: HIDE AND SHOW THEM AT APPROPRIATE TIMES

var $password = $("#password");
var $confirm_password = $("#confirm_pasword");
//HIDE HINTS
$("form span").hide();

function arePasswordsMatching() {
  return $password.val() === $confirmPassword.val();
}

function passwordEvent(){
   //FIND OUT IF THE PASSWORD IS VALID
  if($password.val().length > 8) {
      // HIDE HINT IF VALID  
    $password.next().hide();
  } else {
     //ELSE SHOW HINT
    $password.next().show();

  }   
}

function confirmPasswordEvent(){
              //FIND OUT IF PASSWORD AND CONFIRMATION MATCH
              if(arePasswordsMatching()){
                //HIDE HINT IF MATCHED
                $confirm_password.next().hide();
              } else {              
              //ELSE SHOW HINT     
                $confirm_password.next().show();
              }

}
//WHEN EVENT HAPPENS ON PASSWORD INPUT

$password.focus(passwordEvent).keyup(passwordEvent).focus(confirmPasswordEvent).keyup(confirmPasswordEvent);


//WHEN EVENT HAPPENS ON CONFIRMATION INPUT
$confirm_password.focus(confirmPasswordEvent).keyup(confirmPasswordEvent);
Paul Neumyer
Paul Neumyer
15,301 Points
Paul Neumyer
Paul Neumyer
15,301 Points

I found one error on the function arePasswordMatching() where I have $confirmPassword.val(), where it should be $confirm_password.val(); , however that did not help at all.

4 Answers

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Found a typo in your original confirm_password variable. var $confirm_password = $("#confirm_pasword"); toward the top of the page should be var $confirm_password = $("#confirm_password");

Judd Higgins
Judd Higgins
8,846 Points
Judd Higgins
Judd Higgins
8,846 Points

I've had to do a lot of pausing and rewinding on these jQuery videos as trying to type my code and follow along with the fast pace and multiple quick changes in code can be dizzying and I've easily missed a () or other character.

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Edit: Just saw your comment. Ignore this answer.

In your code, one of your variables in your arePasswordsMatching function is incorrect. Right now it reads:

function arePasswordsMatching() {
  return $password.val() === $confirmPassword.val();
}

It should be:

function arePasswordsMatching() {
  return $password.val() === $confirm_password.val();
}
Paul Neumyer
Paul Neumyer
15,301 Points
Paul Neumyer
Paul Neumyer
15,301 Points

Thank you! I know I was not crazy!