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.

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()); }




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.


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