form resets automatically

[staypuffinpc]

I have created a simple login form and am working on validation. Currently, I just check to make sure there is actually something filled out in the name field and, if not, when the user clicks the "submit" button, a div appears underneath the input indicating that the user needs to fill out their name.
$('form').submit(function(){
if ( $('#userName').val() == '') { $("<div class='error'>please provide your user name to continue</div>").insertAfter('#userName');}
});
when I submit the form, this works fine, but then the page quickly refreshes and it goes away. Does anyone know what's going on?

You can see a sample at http://peter.byuipt.net/sites/rewardSystem/

[staypuffinpc]

OK, I figured it out. I forgot to return false, so that the form doesn't continue on to execute its "action" attribute. For clarification, here's the working code:


$('form').submit(function(){
if ( $('#userName').val() == '') { $("<div class='error'>please provide your user name to continue</div>").insertAfter('#userName');
return false;}
});