Empêcher un else de se répeter à chaque submit
Bonsoir,
Je suis entrain de paramétré la vérification des champs d'un formulaire en javascript.
Voici le bout de code où se trouve mon soucis:
$("#btn_next").click(function(){
valid=true;
if($("#nom").val()==""){
$(".border1").next(".error-message").fadeIn();
$(".border1").css("border", "solid 2px #ff2d2d").fadeIn();
valid=false;
/* if($("#nom").val()!=""{
$('.border1').stop().animate();
};
} */
else if(!$("#nom").val().match(/^[a-z-ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ]{2,15}$/i)){
$(".border1").next(".error-message").fadeIn();
$(".border1").css("border", "solid 2px #ff2d2d").fadeIn();
valid=false;
}
else{
$(".border1").next(".error-message").fadeOut();
var div = $('.border1');
$({alpha:1}).animate({alpha:0}, {
duration: 500,
step: function(){
div.css('border-color','rgba(255,45,45,'+this.alpha+')');
}
});
}Donc,
Ce code vérifie dans un premier temps si le champs n'est pas vide et affiche l'icone (error-message) ainsi qu'une bordure en FadeIn
Dans un deuxieme temps on vérifie si la saisie correspond bien à l'expression régulière renseigné dans .match().
Si tout est ok on FadeOut la bordure (else).
Mon problème: Le else se répète à chaque submit, autrement dit, la bordure fait son fadeOut sur le contour, même lorsque le champs est correctement rempli.
Comment contourner ce petit soucis?
J'ai essayé plusieurs codes mais aucuns ne fonctionnent vraiment, j'ai notamment laissé mes derniers essais, il s'agit du bout de code en commentaire.
Merci beaucoup
6 réponses
C'est normal qu'il y ait ce comportement. La valeur de l'input n'est pas vide..
Essaye avec ceci :
else{
var div = $('.border1');
var errorMsg = div.next(".error-message");
if(errorMsg.is(":visible")){
$({alpha:1}).animate({alpha:0}, {
duration: 500,
step: function(){
errorMsg.fadeOut();
div.css('border-color','rgba(255,45,45,'+this.alpha+')');
}
});
}
}Hello, c'est simple.
Tu fais une condition qui test si la valeur de l'input est vide et donc entre AUTOMATIQUEMENT dans le "else" si ce n'est pas vide.
Je me suis vite dit qu'il fallait exécuter le code que si l'élément ( $(".border1").next(".error-message") ) est visible. Vu que tu le fadeIn() à chacune de tes bonne conditions.
Merci ça marche au poil.
Pourrais-tu m'expliquer ce qu'il n'allait pas? j'aimerais bien comprendre comment tu as interprété tout ça... Je suis novice en js, et je ne demande qu'à comprendre de mes erreurs.
Merci
Merci pour ces éléments de réponses. J'y vois dorénavant plus clair. Mais dans mon cas, j'ai plusieurs input avec plusieurs noms "prenom" "tel" "adresse"...
Lorsque j'applique ton else à tout mes autres éléments, toutes les ".border1" fadeOut lorsque qu'un seul input est correctement rempli.
Je sais pas si tu vois où je veux en venir.
J'ai donc essayé de creer une autre class ".border2" pour l'appliquer à un autre champs input (en l’occurrence "prenom"). Mais ça ne fonctionne pas vraiment.
Regarde: TEST
Petit morceau de code pour illustrer ce conflit:
if($("#nom").val()==""){
$(".border1").next(".error-message").fadeIn();
$(".border1").css("border", "solid 2px #ff2d2d").fadeIn();
valid=false;
}
else if(!$("#nom").val().match(/^[a-z-ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ]{2,15}$/i)){
$(".border1").next(".error-message").fadeIn();
$(".border1").css("border", "solid 2px #ff2d2d").fadeIn();
valid=false;
}
else{
var div = $('.border1');
var errorMsg = div.next(".error-message");
if(div.is(":visible")){
$({alpha:1}).animate({alpha:0}, {
duration: 500,
step: function(){
errorMsg.fadeOut();
div.css('border-color','rgba(255,45,45,'+this.alpha+')');
}
});
}
}
if($("#prenom").val()==""){
$(".border2").next(".error-message").fadeIn();
$(".border2").css("border", "solid 2px #ff2d2d").fadeIn();
valid=false;
}
else if(!$("#prenom").val().match(/^[a-z-ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ]{2,15}$/i)){
$(".border2").next(".error-message").fadeIn();
$(".border2").css("border", "solid 2px #ff2d2d").fadeIn();
valid=false;
}
else{
var div = $('.border2');
var errorMsg2 = div.next(".error-message");
if(div.is(":visible")){
$({alpha:1}).animate({alpha:0}, {
duration: 500,
step: function(){
errorMsg2.fadeOut();
div.css('border-color','rgba(255,45,45,'+this.alpha+')');
}
});
}
}Merci beaucoup
Bonjour,
J’espère que vous avez passé un agréable réveillon. Pour ma part ce fût... un tantinet lourd pour mon estomac...
Bref, j'ai un peu avancé sur mon soucis, Dorénavant j'ai exactement le même problème qu'au début.
J'ai réalisé deux class bordures: "border1"(nom) et "border2"(prenom) déclarés avec deux noms differents "div" et "div2". J'ai déclaré error-message de deux façons "errorMsg" et "ErrorMsg2".
Dorénavant, tout ce passe bien hormis le faite que les bordures fadeout même si elles sont correctement remplis. Retour à la case départ. Pourtant je ne vois pas de "soucis". Tout est bien clair.
Voyez-vous un conflit quelconque?
if($("#nom").val()==""){
$(".border1").next(".error-message").fadeIn();
$(".border1").css("border", "solid 2px #ff2d2d").fadeIn();
valid=false;
}
else if(!$("#nom").val().match(/^[a-z-ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ]{2,15}$/i)){
$(".border1").next(".error-message").fadeIn();
$(".border1").css("border", "solid 2px #ff2d2d").fadeIn();
valid=false;
}
else{
var div = $('.border1');
var errorMsg = div.next(".error-message");
if(div.is(":visible")){
$({alpha:1}).animate({alpha:0}, {
duration: 500,
step: function(){
errorMsg.fadeOut();
div.css('border-color','rgba(255,45,45,'+this.alpha+')');
}
});
}
}
if($("#prenom").val()==""){
$(".border2").next(".error-message").fadeIn();
$(".border2").css("border", "solid 2px #ff2d2d").fadeIn();
valid=false;
}
else if(!$("#prenom").val().match(/^[a-z-ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ]{2,15}$/i)){
$(".border2").next(".error-message").fadeIn();
$(".border2").css("border", "solid 2px #ff2d2d").fadeIn();
valid=false;
}
else{
var div2 = $('.border2');
var errorMsg2 = div2.next(".error-message");
if(div2.is(":visible")){
$({alpha:1}).animate({alpha:0}, {
duration: 500,
step: function(){
errorMsg2.fadeOut();
div2.css('border-color','rgba(255,45,45,'+this.alpha+')');
}
});
}
}