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

2 réponses


tu a mit des console log dans tes deux conditions qui ne marche pas pour voir si tu y passe ou pas?

r4z0rFr
Auteur

Ça fesais longtemps que j'étais pas venu checker les messages :D en fait j'ai tellement malmené ce bout de code à essayer encore et encore d'autres choses que a force c'est devenu un vrai foutoir, je débute en jquery et j'ai commencé par le php et j'imagine que ça m'a pas mal influence . En effet après les conseils de defy j'ai mis des console log et je me suis rendu compte que ça ne fonctionnais pas mais après ça j'ai un peu laissé tomber ce projet là du coup je vais pouvoir y retourner un peu pour essayer de terminer ça :) en tout cas merci à vous deux pour vos réponses :) et bonne journée