Ne pas rafraîchir la page - formulaire

Bonjour à tous,

je suis en train de coder mon propre portfolio sur une seule page qui défile (en javascript) et j'ai un problème avec l'envoie de mon formulaire de contact. En effet quand je clique sur le bouton "submit", la page se rafraîchit automatiquement et la personne est renvoyé au début, chose qui n'est pas pratique pour voir les erreurs de validations ou juste pour savoir si le mail a été envoyé ou non.

J'aimerais donc savoir si il y avait une technique assez simple pour éviter le rafraîchissement de la page lors du clique sur le bouton "submit" (je sais qui faut passer par de l'ajax mais je suis débutant dans le domaine).

Voici une partie de mon code:

L'index.php

<form method="post" name="formulaire" class="contactform" action="index.php" id="formulaire">
                        <div class="inputbloctop">      
                            <div class="inputleft">
                                <label for="nom" class="username-label">Nom</label>
                                <input type="text" name="nom" id="nom" maxlength="30" class="ctop" value="<?php if(isset($nom)) echo $nom; ?>" placeholder="Nom"/>
                                <div class="error-message"><?php if(isset($erreurnom)) echo $erreurnom; ?></div>
                            </div>
                            <div class="inputright">
                                <label for="email" class="email-label">Email</label>
                                <input type="text" name="email" id="email" maxlength="50" class="ctop" value="<?php if(isset($email)) echo $email; ?>" placeholder="mail@domain.com"/>
                                <div class="error-message"><?php if(isset($erreurmail)) echo $erreurmail; ?></div>
                            </div>
                        </div>  
                        <div class="input textarea">
                            <label for="message" class="textarea-label">Message</label>
                            <textarea name="message" clos="30" rows="15" maxlength="2000" id="message" class="cmsg" value="" /><?php if(isset($message)) echo $message; ?></textarea>
                            <div class="error-message"><?php if(isset($erreurmessage)) echo $erreurmessage; ?></div>
                        </div>
                        <div class="submit">
                            <input type="submit" value="Envoyer" id="envoyer" class="submit" onclick="pop_it(formulaire);"/>
                        </div>
                        <input type="text" name="antibot" id="antibot" />
                </form>

                    <div id="contact_form"></div>

Le contact.php :

<?php

    if(!empty($_POST)){
        extract($_POST);
        $valid=true;

        if($addresse != ""){

        }
        else{
            if(empty($nom)){
                $valid=false;
                $erreurnom="Vous n'avez pas rempli votre nom";
            }
            if(!preg_match("/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i",$email)){
                $valid=false;
                $erreurmail="Email non valide";
            }
            if(empty($email)){
                $valid=false;
                $erreurmail="Vous n'avez pas rempli votre email";
            }
            if(empty($message)){
                $valid=false;
                $erreurmessage="Vous n'avez pas rempli votre message";
            }

            if($valid){
                $to = "monmail@domaine.com";
                $sujet = $nom." a contacté le site";
                $header = "From: monmail@domaine.com \n";
                $header .="Reply-To: $email";

                $message = stripslashes($message);
                $nom = stripslashes($nom);
                if(mail($to,$sujet,$message)){
                    $reponse = "votre message a bien été envoyé";
                    unset($nom);
                    unset($email);
                    unset($message);
                    unset($_POST);
                    $nom="";
                    $email="";
                    $message="";
                }
                else
                    $reponse = "Une erreur est survenue et votre mail n'a pas été envoyé";
            }
        }
    }

?>

et le js :

//ValidContact  

        $("#envoyer").submit(function(){

            valid=true;

            if($("#nom").val()==""){
                $("#nom").css("border-color","#ff6666");
                $("#nom").next(".error-message").text("Veuillez entrer un nom");
                valid=false;
            }
            else{
                $("#nom").css("border-color","#009900");
                $("#nom").next(".error-message").text("");
            }

            if($("#email").val()==""){
                $("#email").css("border-color","#ff6666");
                $("#email").next(".error-message").text("Veuillez entrer un email");
                valid=false;
            }
            else{
                if(!$("#email").val().match(/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i)){
                    $("#email").css("border-color","#ff6666");
                    $("#email").next(".error-message").text("Veuillez entrer un email valide");
                    valid=false;
                }
                else{
                    $("#email").css("border-color","#009900");
                    $("#email").next(".error-message").text("");
                }
            }

            if($("#message").val()==""){
                $("#message").css("border-color","#ff6666");
                $("#message").next(".error-message").text("Veuillez entrer votre message");
                valid=false;
            }
            else{
                $("#message").css("border-color","#009900");
                $("#message").next(".error-message").text("");
            }
                        var nom = $("#nom").val();
                        var email = $("#email").val();
                        var message = $("#message").val();
                        var dataString = 'name='+ name + '&email=' + email + '&message=' + message;  
                $.ajax({  
                  type: "POST",  
                  url: "contact.php",  
                  data: dataString,  
                  success: function() {  
                    $('#contact_form').html("<div id='reponse'></div>");  
                    $('#reponse').html("<h2>Contact Form Submitted!</h2>")  
                    .append("<p>We will be in touch soon.</p>")  
                    .hide()  
                    .fadeIn(1500, function() {  
                      $('#reponse').append("<img id='checkmark' src='images/check.png' />");  
                    });  
                  }  
                });  
                return valid;  
                });

J'ai utilisé un tuto pour l'ajax mais celui-ci ne fonctionne pas et comme je ne m'y connais pas beaucoup je ne vois pas trop où est le problème. J'espère que vous pourrez m'aider à trouver une réponse à mon problème.

Merci par avance.
Zyow