Jquery error slow down

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> &nbsp; 
<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> &nbsp;    
<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> &nbsp; 
<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> &nbsp; 
<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> &nbsp;    
<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> &nbsp; 
<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