Formulaire de connection intéractif avec bootstrap

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'essaie de créer un formulaire intéractif qui se colore en vert quand le champ a été rempli correctement , passe au rouge quand il n'a pas été rempli correctement et revient au blanc quand il est vide

Voici mon code html

<form method="post">

        <div id="erreur"><p>Vous n'avez pas rempli correctement les champs du formulaire !</p></div>

        <div class="center-block" id="formBlock">
            <div class="row">
                <div id="pseudo" class="champ form-group has-feedback col-sm-push-4 col-md-4 col-xs-push-2 col-xs-8">
                    <label for="pseudo" class="control-label">Pseudo</label>
                    <input type="text" name="pseudo" class="form-control" id="InputSurname" placeholder="Surname"/>
                    <span class="champ glyphicon form-control-feedback" aria-hidden="true"></span>
                </div>
            </div>
            <div class="row">
                <div id="pseudonyme" class="champ form-group  col-sm-push-4 col-md-4 col-xs-push-2 col-xs-8">
                    <label for="nom" class="control-label">nom</label>
                    <input type="text" name="nom" class="form-control" id="InputName" placeholder="Name"/>
                </div>
            </div>
            <div class="row">
                <div id="pseudonyme" class="champ form-group  col-sm-push-4 col-md-4 col-xs-push-2 col-xs-8">
                    <label for="prenom" class="control-label">Prénom</label>
                    <input type="text" name="prenom" class="form-control" id="InputSurname" placeholder="Surname"/>
                </div>
            </div>

            <div class="row">
                <div id="emailForm" class="champ form-group has-feedback col-sm-push-4 col-md-4 col-xs-push-2 col-xs-8">

                    <label for="mail" class="control-label">E-mail</label>
                    <input type="text" name="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email"/>
                    <span class="champ glyphicon form-control-feedback" aria-hidden="true"></span>

                </div>
            </div>
            <div class="row">
                <div id="password" class="champ form-group has-feedback col-sm-push-4 col-md-4 col-xs-push-2 col-xs-8">

                    <label for="mdp" class="control-label">Mot de passe</label>
                    <input type="text" name='password' id="mdp" class="form-control" placeholder='password'/>
                    <span class="champ glyphicon form-control-feedback" aria-hidden="true" ></span>

                </div>
            </div>
            <div class="row">
                <div id="passwordConfirm" class="champ form-group has-feedback col-sm-push-4 col-md-4 col-xs-push-2 col-xs-8">

                    <label for="confirmation" class="control-label">Confirmation</label>
                    <input type="text" name='confirmation' id="confirmation" class="form-control" placeholder='password confirm'/>
                    <span class="champ glyphicon form-control-feedback" aria-hidden="true"></span>

                </div>
            </div>

            <button type="submit" id="envoiContact" value="Envoyer" class="form-control btn btn-primary"/>Envoyer</button>

        </div>

    </form>

et voici le code jquery

$(document).ready(function () {

    var $pseudo, $password, $confirmation, $mail, $envoi, $reset, $erreur, $champ;
    $pseudo = $("#pseudo");
    $password = $('#password');
    $confirmation = $('#passwordConfirm');
    $mail = $('#emailForm');
    $envoi = $('#envoi');
    $reset = $('#rafraichir');
    $erreur = $('#erreur');
    $champ = $('.champ');

    $pseudo.keyup(function () {

        if ($(this).val().length < 5) {
            $("#pseudo").removeClass("has-success");
            $("#pseudo").find("span").removeClass("glyphicon-ok");
            $("#pseudo").addClass("has-error");
            $("#pseudo").find("span").addClass("glyphicon-remove");
        }else if ($(this).val().length > 5){
            $("#pseudo").removeClass("has-error");
            $("#pseudo").find("span").removeClass("glyphicon-remove");
            $("#pseudo").addClass("has-success");
            $("#pseudo").find("span").addClass("glyphicon-ok");
        }else {
            $("#pseudo").find("span").removeClass("glyphicon-ok");
            $("#pseudo").find("span").removeClass("glyphicon-remove");
            $("#pseudo").removeClass("has-success");
            $("#pseudo").removeClass("has-error");

        }
    });

    $password.keyup(function () {
        if ($(this).val().length < 5) {
            $("#password").removeClass("has-success");
            $("#password span").removeClass("glyphicon-ok");
            $("#password").addClass("has-error");
            $("#password span").addClass("glyphicon-remove");
        }
        else {
            $("#password").removeClass("has-error");
            $("#password span").removeClass("glyphicon-remove");
            $("#password").addClass("has-success");
            $("#password span").addClass("glyphicon-ok");
        }
    });

    $confirmation.keyup(function () {
        if ($(this).val() != $confirmation.val()) {
            $("#passwordConfirm").removeClass("has-success");
            $("#passwordConfirm span").removeClass("glyphicon-ok");
            $("#passwordConfirm").addClass("has-error");
            $("#passwordConfirm span").addClass("glyphicon-remove");
        } else if ( $(this).val() == "" ) {
            $("#passwordConfirm").removeClass("has-success");
            $("#passwordConfirm span").removeClass("glyphicon-ok");
            $("#passwordConfirm").addClass("has-error");
            $("#passwordConfirm span").addClass("glyphicon-remove");
        }
        else {
            $("#passwordConfirm").removeClass("has-error");
            $("#passwordConfirm span").removeClass("glyphicon-remove");
            $("#passwordConfirm").addClass("has-success");
            $("#passwordConfirm span").addClass("glyphicon-ok");
        }
    });

    $mail.keyup(function () {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var emailaddressVal = $(this).val();
        if (!emailReg.test(emailaddressVal)) {
            $("#emailForm").removeClass("has-success");
            $("#emailForm span").removeClass("glyphicon-ok");
            $("#emailForm").addClass("has-error");
            $("#emailForm span").addClass("glyphicon-remove");
        } else if ( $(this).val() == "" ) {
            $("#emailForm").removeClass("has-success");
            $("#emailForm span").removeClass("glyphicon-ok");
            $("#emailForm").addClass("has-error");
            $("#emailForm span").addClass("glyphicon-remove");
        }else {
            $("#emailForm").removeClass("has-error");
            $("#emailForm span").removeClass("glyphicon-remove");
            $("#emailForm").addClass("has-success");
            $("#emailForm span").addClass("glyphicon-ok");
        }

    });

    $envoi.click(function (e) {

        // puis on lance la fonction de vérification sur tous les champs :
        verifier($pseudo);
        verifier($password);
        verifier($confirmation);
        verifier($mail);
    });

    $reset.click(function () {
        $champ.removeClass("has-error");
        $champ.removeClass("has-success");
        $champ.removeClass("glyphicon-remove");
        $champ.removeClass("glyphicon-ok");
        $erreur.css('display', 'none'); // on prend soin de cacher le message d'erreur
    });

    function verifier(champ) {
        if (champ.val() === "") { // si le champ est vide
            $erreur.css('display', 'block'); // on affiche le message d'erreur
        }
    }

});

le code se colore bien en rouge mais ne passe pas au vert quand c'est bon et ne revient pas au blanc lorseque c'est vide

merci d'avance