Aide utilisation jQuery pour validation de formulaire

Bonjour a tous,

je me lance doucement dans le javascript, j'ai trouvé sur le net une bibliotheque nommée jQuery qui permet de faire des validations de formulaire etc...
je me sers deja de jQuery afin d'afficher ou cacher mon formulaire comme ceci:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
    // Masquage  du formulaire
    $("form").hide();
    // CSS : curseur pointeur
    $("#lien_form").css("cursor", "pointer");
    $("#lien_form").click(function() 
    {
        // Actions uniquement si la réponse n'est pas déjà visible
        if($("form").is(":visible") == false) {
            // Affichage du formulaire
            $("form").slideDown();
        }
        else
        {
            $("form").slideUp();
        }
    });
});
et voici la partie HTML:

<a  id="lien_form">[Accéder au formulaire]</a>
            <form  method="POST" action="?page=13">
                <table style="margin:auto;padding-top:2px;">
                        <tr>
                            <td style="padding-top:2px;">Nom</td>
                            <td style="padding-top:2px;"><input type="text" name="nom" id="nom"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Prénom</td>
                            <td style="padding-top:2px;"><input type="text" name="prenom"  id="prenom"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Date de naissance<br> (jj/mm/aaaa)</td>
                            <td style="padding-top:2px;"><input type="text" name="date de naissance" id="date" /></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Adresse complète</td>
                            <td style="padding-top:2px;"><textarea name="adresse" id="adresse" rows="2" cols="15" /></textarea></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Code postal</td>
                            <td style="padding-top:2px;"><input type="text" name="code_postal" id="code_postal"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Ville</td>
                            <td style="padding-top:2px;"><input type="text" name="ville" id="ville"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Tel</td>
                            <td style="padding-top:2px;"><input type="text" name="tel" id="tel"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">E-mail</td>
                            <td style="padding-top:2px;"><input type="text" name="email" id="email"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:right;padding-top:10px;"><input type="submit"  id="envoyer" value="Envoyer"/></td>
                        </tr>
                </table>
            </form>

donc l'affichage ou non du formulaire marche parfaitement; j'ai donc voulu passer a l'étae suivante qui est la controle du formulaire: avec ceci:

//VERIFICATION FORMULAIRE
    $("#envoyer").click(function(){
        if($("#nom").val() == ""){
            $("#nom").next(".erreur").fadeIn().text("Veuillez entrer votre nom");
        }
        else{
            $("#nom").next(".erreur").fadeOut();
        }
la partie CSS est comme ceci:
.erreur{
background: url(images/wrong.png)  center no-repeat;
padding: 0 0 0 30px;
color: red;
display: none;
}

alors la je rencontre deux bugs:
1/ rien ne s'affiche dans mon bloc erreur aucun message rien
2/ le formulaire disparait lorsque j'appui sur le bouton valider(comme voulu mais juste au chargement de la page!)

Quelqu'un d'avisé pourrait il m'aider svp?
merci

 

bon, je galère franchement, il me semble que mes deux fonctions se marchent sur les pieds!
car je veux cacher le formualire a l'affichage de la page et seulement a ce moment la mais j'ai l'impression que si je click sur mon bouton d'envoi, le script javascript est a nouveau exécuté et le formulaire de nouveau caché!
il doit y avoir une solution.....

par contre je n'avance pas coté validation des champs du form. rien ne s'affiche....(meme si je commente mon code pr "cacher" mon form)

 

J'ai eu le même souci il faut faire un return false à la fin de ton traitement javascript pour l'empêcher de recharger la page.

Par contre j'ai un autre souci d'après ce que j'ai compris la méthode .submit() est censée renvoyée toutes les données du formulaire mais ce n'est pas le cas...Comment récupérer toutes les données?

J'ai trouvé ma je faisais {source: $('#source').val()} alors qu'il faut lui spécifier que c'est un select en faisant {source: $('#source option:selected').val()}