Pourquoi la méthode nextSibling en javascript ne fonctionne pas correctement

Question

J'ai ce code qui définit innerHTML pour l'élément frère du type d'entrée [email] mais pas pour l'élément frère du type d'entrée [nom]. Voici le balisage.

<div class="container"> 

<div> 
    <input type="email" name="email" id="email" class="validate"/> 
    <span class="email"></span> 
</div> 
<div> 
    <input type="text" name="name" id="name" class="validate"/> 
    <span class="name"></span> 
</div> 
<input type="submit" value="Download" id="install"/> 

</div> 

Ceci est la partie du balisage. Vous voyez qu'il y a une entrée avec l'étendue de l'élément frère.

Voici le code javasript qui valide le nom & de l'e-mail et qui renvoie errorText s'il y a lieu à l'élément frère correspondant.

window.addEventListener("load",ready); 

function _x(elem){ 
    return document.getElementById(elem) || document.getElementsByClassName(elem); 
} 

function ready(){ 

    function Start(){ 
     var call  = this; 
     this.expEmail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
     this.button = _x("install"); 
     this.field = _x("validate"); 

     this.clicks = function(){ 
      for(var i=0;i<this.field.length;i++){ 
      this.field[i].addEventListener("keyup",this.validate); 
     } 
    }; 

    this.validate = function(){ 
     call.check(this); 
    } 

    this.check = function(field){ 
     var value = field.value, 
      error = "", 
      sibli = field.nextSibling; //This is giving problem 
     switch(field.name){ 
      case "email": 
       error = (!this.minLength(value,12)) ? "Email must be greater then 3 characters":""; 
       error = (!this.maxLength(value,24)) ? "Email cannot be more then 24 characters":""; 
       error = (!this.valEmail(value,12)) ? "The email format is invalid":""; 
      break; 
      case "name": 
       error = (!this.minLength(value,3)) ? "Name must be greater then 3 characters":""; 
       error = (!this.maxLength(value,24)) ? "Name cannot be more then 24 characters":""; 
      break; 
     } 
     sibli.innerHTML = error; //outputs only for input type [email] 
    }; 

    this.minLength = function(field,length){ 
     return (field.length>length); 
    }; 

    this.maxLength = function(field,length){ 
     return (field.length<length); 
    }; 

    this.valEmail = function(field){ 
     return (this.expEmail.test(field)); 
    }; 
} 

var start = new Start(); 
    start.clicks(); 
} 

Answer 1

Regardez cette partie:

error = (!this.minLength(value,3)) ? "Name must be greater then 3 characters":""; 
    error = (!this.maxLength(value,24)) ? "Name cannot be more then 24 characters":""; 

Pour la première ligne, this.minLength retourne faux puisque nous vérifions chaque keyup, de sorte que vous opterais erreur « Le nom doit être plus de 3 caractères ". Puis dans la deuxième ligne, this.maxLength retournera vrai qui ensuite avec le "!" les résultats de l'opérateur en faux et votre erreur se prépare à « » faire sibli.innerHTML = "";

Donc, fondamentalement, vous voulez faire:

case "name": 

     if (!this.minLength(value,3)) { 
      error = "Name must be greater then 3 characters"; 
     } else if(!this.maxLength(value,24)) { 
      error = "Name cannot be more then 24 characters"; 
     } 

    break;