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

My submit button stays disabled?

Can anyone tell me where the error is in this code and why it won't submit even when password and confirm password match? $("form span").hide();

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

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

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

var $password = $("#password"); var $confirmPassword = $("#confirmPassword");

function passwordEvent() { if(isPasswordValid()) { $password.next().hide(); } else { $password.next().show();
} }

function confirmPasswordEvent() { if(arePasswordsMatching()) { $confirmPassword.next().hide(); } else { $confirmPassword.next().show(); } }

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

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

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

enableSubmitEvent();

5 Answers

Gareth Borcherds
Gareth Borcherds
9,372 Points

Thanks, without the jsfiddle we would have never seen that you are not caching the right element. You are using

var $confirmPassword = $("#confirmPassword");

in your JS, but your html element ID is confirm_password. So change the above line to

var $confirmPassword = $("#confirm_password");

and it works perfectly.

Gareth Borcherds
Gareth Borcherds
9,372 Points

Why don't you create a jsfiddle that includes the html so we can see the whole picture? It's hard to see what's wrong from just looking at the JS as something may not be incorrect here, but could be elsewhere.

http://jsfiddle.net/

OK, I haven't used jsfiddle, so here it is: http://jsfiddle.net/adamzuckerberg/Zq7jW/

OK, I haven't used jsfiddle, so here it is: http://jsfiddle.net/adamzuckerberg/Zq7jW/

Nice. OK, thank you for the intro to jsfiddle and for the help. It works great now