My code only seems to work correctly when the characters are typed into the confirm password box first

//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()) {
    //If password is valid, Hide hints
    $password.next().hide();
  } else {
    //Else show hints
    $password.next().show();
  }             
}

function confirmPasswordEvent(){
  //Find out if passwords match
  if(arePasswordsMatching()) {
     //hide hint if match 
    $confirmPassword.next().hide();
  } else {
     //Else show hint
    $confirmPassword.next().show();
  }
}

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

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

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

enableSubmitEvent();