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开发者_StackOverflow中文版 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!
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
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()
1. 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.
精彩评论