Executing a form after animation is done JQuery - php

Question

I am trying to submit the form only after my animation is done and completed
Code ------> http://pastie.org/5109573
<form action='loginn.php' method='post'>
<fieldset>
<legend>Register</legend>
<label for='username'>Username*:</label>
<input type='text' name='username' id='username' maxlength="50"
/>
<label for='password'>Password*:</label>
<input type='password' name='password' id='password'
maxlength="50" /> <a><input class ="animated" type='submit' name='Submit' value='Submit' /></a>
</fieldset>
</form>
<span></span>
<script src="jquery.js"></script>
<script>
$("form").submit(function () {
event.preventDefault();
if ($("input:first").val() == "correct") {
$("span").text("OKAY :D").show().fadeOut(1000);
$("a").addClass('animated hinge');
$("span").promise().done(function () {
return true;
});
} else {
$("span").text("Not valid!").show().fadeOut(1000);
return false;
}
});
</script>
</body>
</html>
The form gets submitted before the animation is complete !

Answer 1

You'll need to use the animations callback function to submit the form when the animation completes, like so:
$("input[name='Submit']").on('click', function(e) {
e.preventDefault();
var form = $(this);
if ($("input:first").val() == "correct") {
$("span").text("OKAY :D").show().fadeOut(1000, function() {
form.submit();
});
$("a").addClass('animated hinge');
} else {
$("span").text("Not valid!").show().fadeOut(1000);
}
});​

Answer 2

The problem is likely here:
$("form").submit(function() {
event.preventDefault();
You're not declaring event. Try this:
$("form").submit(function(event) {
Edit:
Also, the function you're passing to the done() method doesn't do anything. Returning true from that function won't affect the event; in fact, the event is already handled and gone by the time that function runs.
If you're trying to submit the form with your done callback, you need to do it explicitly. To avoid an infinite loop when it submits again, try specifying a namespace:
$("form").submit(function(event) {
var that = this;
if (event.namespace != 'verified') {
event.preventDefault();
if ($("input:first").val() == "correct") {
$("span").promise().done(function () {
$(that).trigger('submit.verified');
});
} else {
$("span").text("Not valid!").show().fadeOut(1000);
return false;
}
}
});​