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