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