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

Christina Pagano
Christina Pagano
15,676 Points

JQuery Basics: Creating a Password Confirmation Form - Submit button remains disabled when passwords are valid...

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 hapens on confirmation input
$confirmPassword.focus(confirmPasswordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent());

enableSubmitEvent();

So, the password hints show up and disappear just fine at the appropriate times, and when the password and confirm password are both valid the submit button should enable, but remains disabled. Can anyone see why? Don't know if I'm missing something obvious. Lol.

3 Answers

Hi Christina,

Didn't spot this the first time around but in your last keyup event for both inputs, you're trying to call the enableSubmitEvent function rather than passing in just the name of the function.

keyup(enableSubmitEvent());

You need to remove the parenthesis after the function name.

Christina Pagano
Christina Pagano
15,676 Points

Ahhhhh! You're right! Thank you so much!

You're welcome

Still learning jQuery myself, but try removing the "not equal to" operator from the enableSubmitEvent function.

function enableSubmitEvent() {
  $("#submit").prop("disabled", canSubmit());
}
Christina Pagano
Christina Pagano
15,676 Points

Well, I want it to only be disabled when I can NOT submit, so when canSubmit() is false. I did try this though and it enabled the submit button to work when the passwords were valid as well as invalid, so there's something going on with it not being able to pick up isPasswordValid and arePasswordsMatching, although the functions to show/hide the hint labels do... argggh. Thank you for taking the time to read and respond though. (:

Do you have the id set on your submit button?

Christina Pagano
Christina Pagano
15,676 Points

Yes! Haha. I rewatched and followed everything Andrew did, still not working right, might just have to let this one go. Maybe a bug with my browser or workspaces. Merp.