Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS jQuery Basics (2014) Creating a Password Confirmation Form Using focus() and keyup()

Adam Franklin
Adam Franklin
3,508 Points

Where do I add the .keyup() here

I'm finding it a little difficult to understand what is going on here. The question wants line 51 to have a focus and keyup attached to it. It looks like the way the instructor completed his. What am I missing guys?

Cheers and Thank you

js/app.js
//Problem: Hints are shown even when form is valid
//Solution: Hide and show them at appropriate times
var $password = $("#password");
var $confirmPassword = $("#confirm_password");

//Hide hints
$("form span").hide();

function isPasswordValid() {
  return $password.val().length > 8;
}

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

function canSubmit() {
  return isPasswordValid() && arePasswordsMatching();
}

function passwordEvent(){
    //Find out if password is valid  
    if(isPasswordValid()) {
      //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 match
    $confirmPassword.next().hide();
  } else {
    //else show hint 
    $confirmPassword.next().show();
  }
}

function enableSubmitEvent() {
  $("#submit").prop("disabled", !canSubmit());
}

//When event happens on password input
$password.focus(passwordEvent).keyup(passwordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);

//When event happens on confirmation input
$confirmPassword.focus(enableSubmitEvent).keyup(enableSubmitEvent);

enableSubmitEvent;
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Sign Up Form</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>

    <form action="#" method="post">
        <p>
            <label for="username">Username</label>
            <input id="username" name="username" type="text">
        </p>
        <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>
        </p>
        <p>
            <input type="submit" value="SUBMIT" id="submit">
        </p>
    </form>
    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

2 Answers

Lin Lu
Lin Lu
29,171 Points

Replace line 51 by this:

$confirmPassword.keyup(enableSubmitEvent).focus(confirmPasswordEvent).keyup(confirmPasswordEvent);
John Grillo
John Grillo
30,216 Points

This is the right answer....but would you care to go on as to why it is the right answer?

I didn't understand the tutorial question as well, just cannot grasp it.

I don't like the tutor Andrew - often you can fall asleep during his tutorials, or we must watch for minutes while he fixes his grammatical mistakes?? It's strange I'm not the only one finding his tutorials confusing ???