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

Posted by Matthew Huntley
Matthew Huntley
33,883 Points

jQuery Password Confirmation Form: Alert Message Not Working Properly

Hi Team,

I'm attempting to take the jQuery Password Confirmation Form project a bit further by showing an alert message if the user clicks "Submit" without first having valid password information.

Here's the code I've written to accomplish this particular action:

function enableSubmitEvent() {

    if(canSubmit() === true) {
      alert("true!");
      //$("#submit").prop("disabled", !canSubmit());
      $("#submit").click(function(event) {
        return true;
      });
    }

    if(canSubmit() === false) {
      $("#submit").click(function(event) {
        alert("Please enter valid password information.");
        return false;
      });
    } 
}

However, it's not working properly. Even though the function DOES hit the "true" block (I verified this with an alert() message), and I verified via the console that "canSubmit()" does hold value "true" value, whenever I click on "Submit" in this scenario, it always renders the "false" alert message and doesn't proceed to the default link.

Can anyone foresee what I might be doing wrong in this case?

Thanks in advance!

Best, Matthew

3 Answers

Matthew Huntley
Matthew Huntley
33,883 Points

Hi Andrew,

To answer your question: yes, "event.preventDefault();" works just as well as "return false;" Is there a reason one is preferred over the other?

Also, I'm glad you wrote back, because I ended up discovering another bug. By originally including the default event handler for the "Submit" button outside the enableSubmitEvent() button, I was never guaranteeing it would be re-added AFTER canSubmit() yielded "true" (for instance, if the user entered valid zip code information -- thus canSubmit() rendering "true" -- but then proceeded to hit backspace, once again making it "false"; in this scenario, the alert message would no longer properly fire). However, to workaround this, I simply remove all event handlers from "Submit" at the very beginning of enableSubmitEvent() but BEFORE checking if canSubmit() is true or false. I've now seemed to cover all my bases.

Please see my updated code here if you're interested: http://codepen.io/anon/pen/hGDeC

            function enableSubmitEvent() {

    $("#submit").off(); 

    if(canSubmit() === false) {
      $("#submit").click(function(event) {
            alert("Please enter valid password information.");
            event.preventDefault();
      });
    }

    if(canSubmit() === true) {
      $("#submit").click(function(event) {
        return true;
      });
    }

}

Thanks again.

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

preventDefault() can be called anywhere in the function. I like doing it first thing. For a number of reasons. Primarily event.preventDefault() can be called at any point we don't have to wait for a return statement. For whatever reason if there's an issue with the code in between the click and the return false JavaScript may throw an error and then the behavior isn't hijacked correctly and potentially it will follow through.

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Hey Matthew Huntley,

It looks like you're adding the same event handler over and over again. Event handlers in jQuery don't override each other, they just add it to the DOM element again and again.

Does that make sense?

If not share more of your code so we can see it in more context...try using something like codepen if you do.

Regards
Andrew

Matthew Huntley
Matthew Huntley
33,883 Points
Matthew Huntley
Matthew Huntley
33,883 Points

Hi Andrew Chalkley,

Ah, OK, following your explanation, this DOES make sense. Thanks for getting back to me.

I've since taken the default event handler for the "Submit" button (which returns "false" by the way, thus preventing the user from clicking out to the URL) out of the enableSubmitEvent() function and simply made it its own statement (that way, the handler only gets added once and not repeatedly each time the function is called).

Then, within the enableSubmitEvent() function, I check to see if canSubmit() is true; if it is, I remove all event handlers from "Submit" (via the .off() method) and then add a new event handler to it, which returns "true", thus enabling the button to link out to the URL.

Please find my entire app.js file here: http://codepen.io/anon/pen/hGDeC

This seems to have worked and solved my issue; however, if you have any suggestions/best practices advice, I'd definitely welcome it.

Thanks again!

Matthew Huntley

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

I'm glad you got your problem solved.

$("#submit").click(function(event) {
        alert("Please enter valid password information.");
        return false;
});

Instead of return false in the click handler try event.preventDefault(). Like this:

$("#submit").click(function(event) {
        event.preventDefault();
        alert("Please enter valid password information.");
});

See if that still works. Then I'd use that over returning false.