Confused about whether return false; is needed or not

Question

I'm very new to jQuery and I'm writing some validation logic on a form. With the help of this wonderful community I was able to understand how to post my forms with .ajax() and prevent a postback.

I'm using the button.click() event to do this and I know when I need to keep the form from posting I have to put return false; and I understand why. For example:

var name = $("input#name").val();
if (name == "") 
{
    $("label#lblName").css('color','red');
    $("input#name").focus();
    return false;       
}

I understand why returning false is important in this case. But at the very end of my submit button click event there is also a return false, like so:

$(function()
{
    $("#submitbutton").click(function() 
    {
        //validate and submit form

    return false; //WHY is this here? What purpose does it serve?
    });
});

The reason I ask is that I'm also writing a function to change the label colors back to white on .blur(). Like so:

$(function()
{
    $("input#name").blur(function() 
    {
        var name = $("input#name").val();       
        if (name == '')
        {
            $("label#lblName").css('color','red');      
        }
        else
        {
            $("label#lblName").css('color','');
        }
    //Do I need return false here?  and why?       
    });

});

Thank you!

Answer 1

return false is used in jQuery event callbacks in order to stop event propagation, or event bubbling.

If there is more than one callback in the event chain for this element, this means that none of the events past the one which returns false will be called.

This is useful in situations such as the one you posted. A submit button, by default, has an attached event which will submit its containing form. When binding to this submit button's click event, using return false will prevent any previously-registered events from occurring — so your custom click event will be called and the form will not be submitted.

For most situations, you don't need to include return false. It's only necessary if you think there might be another handler higher up in the event chain that could receive the event you're dealing with and somehow mix up your code.

Extra information:

• jsFiddle demonstration
• event.stopPropagation() documentation

Answer 2

It seems like you already know this but just to make sure:

In jQuery, return false; is equivalent to calling event.stopPropagation() and event.preventDefault()¹. Thus it is useful in prevent the default action (such as submitting a form) and in preventing bubbling of the event to avoid some other handler acting on that event.

In your example of the click handler for the submit button, the return false; has the effect of cancelling the default action of submitting that clicking the button invokes. So it is required unless you want the form to be submitted regardless of what you do in your event-handler which is likely NOT the case.

To answer your question about the blur(), you shouldn't return false; unless there is some other blur event handler that you want to stop from acting on this event or there is a default blur action that you want to prevent.