Where do I add the .keyup() here

Question

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>

Answer 1 · 2015-02-26T19:53:13Z

February 26, 2015 7:53pm

Replace line 51 by this:

$confirmPassword.keyup(enableSubmitEvent).focus(confirmPasswordEvent).keyup(confirmPasswordEvent);

Answer 2 · 2016-06-26T15:39:40Z

June 26, 2016 3:39pm

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 ???

Welcome to the Treehouse Community

Looking to learn something new?

Adam Franklin

Adam Franklin

Where do I add the .keyup() here

2 Answers

Lin Lu

Lin Lu

John Grillo

John Grillo

petras Janulevicius

petras Janulevicius