validation formulaire onblur() ne fonctionne pas

Question

J'ai ce code javascript (la fonction SHA-1 est situé dans un fichier externe):

window.onload = validatePass; 

    function validatePass() { 
     var el = document.getElementById("oriPass"); 

     var user_pass = el.value; 
     var hashed_pass = SHA1(user_pass); 

     var span = document.createElement("span"); 
     el.parentNode.appendChild(span); 

     el.onblur = function doSomething() { 
      if(user_pass == null || user_pass == "") { 
       span.setAttribute('class','required'); 
       span.innerHTML="this is a required field"; 
      } 
      else { 
       if(hashed_pass != '7c4a8d09ca3762af61e59520943dc26494f8941b') { 
        span.setAttribute('class','required'); 
        span.innerHTML="wrong password"; 
       } 
       else { 
        span.setAttribute('class','required_ok'); 
         span.innerHTML="valid password";  
        } 
       } 
     } 
    } 

et ce en html:

<form name="form" method="post" action="change_pass.php"> 
    <div class="row"> 
     <div class="col1">write your password:<span class="required">&#42;</span></div> 
     <div class="col2"> 
      <input type="password" name="original_pass" id="oriPass" /> 
     </div> 
    </div> 
    </form> 

Pour une raison quelconque, chaque fois que je le teste, j'ai la même sortie: "mot de passe valide", peu importe si le champ est vide, valide ou invalide.

Qu'est-ce que je fais mal ici?

Answer 1

déplacez le code var user_pass... et var hashed_pass... à l'intérieur de la fonction onblur. Maintenant, ils ne sont assignés que sur onload et ne changeront jamais. Aussi, il pourrait être préférable d'utiliser onchange au lieu de onblur.

window.onload = validatePass; 

function validatePass() { 
    var el = document.getElementById("oriPass"); 


    var span = document.createElement("span"); 
    el.parentNode.appendChild(span); 

    el.onchange = function doSomething() { 
     var user_pass = el.value; 
     var hashed_pass = SHA1(user_pass); 
     if(user_pass == null || user_pass == "") { 
      span.setAttribute('class','required'); 
      span.innerHTML="this is a required field"; 
     } 
     else { 
      if(hashed_pass != '7c4a8d09ca3762af61e59520943dc26494f8941b') { 
       span.setAttribute('class','required'); 
       span.innerHTML="wrong password"; 
      } 
      else { 
       span.setAttribute('class','required_ok'); 
        span.innerHTML="valid password";  
       } 
      } 
    } 
} 

Answer 2

Vous définissez la variable pour le mot de passe uniquement lors du chargement. Ça ne change jamais après ça. Vous devez le définir dans la fonction onblur.