Jquery error slow down - php

Question

I'm having a problem with my Jquery register validation.
I've a problem getting the error message back if you don't fill in a name.
jQuery(document).ready(function () {
$('#register').submit(function () {
var action = $(this).attr('action');
var error = '<div class=\"states\"><li class=\"warning\"><strong>Fout!</strong><br /> U hebt geen naam opgegeven.</li> <br /></ul>';
$(".states li").slideUp(750, function () {
$('.states li').hide();
$('#submit')
.after('<img src="images/ajax-loader.gif" class="loader" />')
.attr('disabled', 'disabled');
$.post(action, {
name: $('#name').val(),
realname: $('#realnam').val(),
pass: $('#pass').val(),
repeatpass: $('#repeatpass').val(),
mail: $('#mail').val(),
mailadres: $('#mailadres').val(),
});
if (name == "") {
$(error).slideDown('slow');
}
});
return false;
});
});
And my HTML code:
<script src="js/aanmelden.js"></script>
<?php
include_once 'include/config.php';
?>
<div class="text-section">
<h1>Aanmelden</h1>
<p>Hier kunt u zich <strong>gratis</strong> aanmelden op <?php echo $sNaam; ?></p>
</div>
<div class="states">
<li class="warning"><strong>Waarschuwing</strong> Deze pagina is (nog) niet af, hier wordt aangewerkt.</li> <br />
</ul>
<form method="POST" action="bin/register.php" id="register">
<fieldset>
<legend>Naam</legend>
<label id="username">Gebruikersnaam:</label>
<input type="text" class="text" name="gebruikersnaam" id="name" placeholder="Uw gebruikersnaam" /> <br />
<label id="realname">Uw echte naam:</label>
<input type="text" class="text" name="echtenaam" id="realnam" placeholder="Uw echte naam" /> <br />
</fieldset>
<fieldset>
<legend>Wachtwoord</legend>
<label id="password">Uw wachtwoord:</label>
<input type="password" class="text" id="pass" name="wachtwoord" placeholder="Uw wachtwoord" /> <br />
<label id="repeatpassword">Uw wachtwoord nogmaals:</label>
<input type="password" class="text" id="repeatpass" name="hwachtwoord" placeholder="Uw wachtwoord nogmaals" /> <br />
</fieldset>
<fieldset>
<legend>Mail</legend>
<label id="mailadres">Uw mail adres:</label>
<input type="text" class="text" name="mail" id="mail" placeholder="Uw mail adres" /> <br />
<label id="repeatmail">Uw mail adres nogmaals:</label>
<input type="text" class="text" name="hmail" id="mailadres" placeholder="Uw mail adres nogmaals" /> <br />``
</fieldset>
<input type="submit" name="submit" value="Registreren" class="orange" id="submit" />
<br />
</form>
My problem(demo at http://mijnrpg.eu and then the second tab). If you click on the button where it says "Registreren", you will see what I mean. It isn't giving an error.

Answer 1

$.post(action, {
name: $('#name').val(),
realname: $('#realnam').val(),
pass: $('#pass').val(),
repeatpass: $('#repeatpass').val(),
mail: $('#mail').val(),
mailadres: $('#mailadres').val(),
});
use serialize
$('#register').serialize();
your post function would be
$.post(action,
$('#register').serialize(),
function(resp)
{
///
}
);
And to answer your question try
$('#name').val()==''
Here i slightly modified your code http://jsfiddle.net/eVA8s/10/
So basically what you want to do is create div tag with id error-message and set it style to hidden,
second watch at your tags you have too many useless tags,
third always use firebug in firefox, or press f12 in chrome.

Answer 2

you need to validate first not last. updated
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$('.error').hide('fast');
$('.warning').hide('fast');
$('.succes').hide('fast');
$('#register').submit(function () {
if ($('#name').val() == "")
{
$('.error').slideDown('slow'); return false;
}
else
{
var action = $(this).attr('action');
$(".states li").slideUp(750, function () {
$('.states li').hide();
$('#submit')
.after('<img src="images/ajax-loader.gif" class="loader" />')
.attr('disabled', 'disabled');
$.post(action, {
name: $('#name').val(),
realname: $('#realnam').val(),
pass: $('#pass').val(),
repeatpass: $('#repeatpass').val(),
mail: $('#mail').val(),
mailadres: $('#mailadres').val(),
});
});
return false;
}
});
});
</script>
<div class="text-section">
<h1>Aanmelden</h1>
<p>Hier kunt u zich <strong>gratis</strong> aanmelden op <?php echo $sNaam; ?></p>
</div>
<div class="states">
<ul class="states">
<li class="error"><strong>Fout</strong> Dit zullen ze zien wanneer ze iets fout hebben gedaan.</li>
<br />
<li class="warning"><strong>Waarschuwing</strong> Dit zullen ze zien wanneer er een onbekende fout is opgetreden.</li>
<br />
<li class="succes"><strong>Goed</strong> Dit zullen ze zien wanneer iets succesvol gegaan is.</li>
</ul>
</div>
<form method="POST" action="bin/register.php" id="register">
<fieldset>
<legend>Naam</legend>
<label id="username">Gebruikersnaam:</label>
<input type="text" class="text" name="gebruikersnaam" id="name" placeholder="Uw gebruikersnaam" /> <br />
<label id="realname">Uw echte naam:</label>
<input type="text" class="text" name="echtenaam" id="realnam" placeholder="Uw echte naam" /> <br />
</fieldset>
<fieldset>
<legend>Wachtwoord</legend>
<label id="password">Uw wachtwoord:</label>
<input type="password" class="text" id="pass" name="wachtwoord" placeholder="Uw wachtwoord" /> <br />
<label id="repeatpassword">Uw wachtwoord nogmaals:</label>
<input type="password" class="text" id="repeatpass" name="hwachtwoord" placeholder="Uw wachtwoord nogmaals" /> <br />
</fieldset>
<fieldset>
<legend>Mail</legend>
<label id="mailadres">Uw mail adres:</label>
<input type="text" class="text" name="mail" id="mail" placeholder="Uw mail adres" /> <br />
<label id="repeatmail">Uw mail adres nogmaals:</label>
<input type="text" class="text" name="hmail" id="mailadres" placeholder="Uw mail adres nogmaals" /> <br />``
</fieldset>
<input type="submit" name="submit" value="Registreren" class="orange" id="submit" />
<br />
</form>
demo link