I'm new to jquery and I'm working an a little project, which is a simple login form. I have a form inside a fieldset that contains 2 textboxes, Username and password and a submit buttion.. In the fieldset but outside the dorm a have a 'div' if the validation fails it prints a message about the failure. It works but it just flashes on then goes away; Can anyone tele me what I'm doing wrong?
HTML Code:
- <fieldset class="ui-widget-content ui-corner-all"><legend class="ui-widget-header ui-corner-all">NFP User Login</legend>
<div id="message"></div>
<form class="ui-widget">
<label for="username">Username:<span class="form-required" title="This field is required.">*</span></label>
<input id="username" class="ui-widget-content ui-corner-all" type="text" name="username" />
<label for="password" >Password:<span class="form-required" title="This field is required.">*</span></label>
<input id="password" class="ui-widget-content ui-corner-all" type="password" name="username" />
<div style="margin-top: 1em;">
<span id="forgot"><a href="#">Forgot Password...</a></span>
<span id="flogin" style="float:right; margin-right: .1em;">
<button type="submit" id="login" name="Login"> Login </button>
</span>
</div>
</form>
<div id="loading">loading</div>
</fieldset>
jquery code:
- $(document).ready(function() {
$('#loading').hide();
$('#message').hide();
$('#username').focus();
$('form').
submit(function() {
var error = false;
$(this).find(":text").each(function() {
if ($(this).val().length == 0) {
//$('#message').hide();
$('#message')
.html("You must Enter a Username")
.addClass('form-required')
.show();
$('#username').focus();
}
}); // end of find text
}); // end of sublit
}); // end doc ready