Empêcher un else de se répeter à chaque submit

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+')');
      }
    });
  }
}

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

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 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

Je suis parvenu à ce que je souhaitais, merci. Sujet Clos.

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+')');
                      }
                    });
                  }
                }