Password Validator in a webpage


#1

Hello,
I did the Password Validator project and it works good. So I decided to make a simple web page where I have an input type=‘password’ and a submit button. When someone types their password and then clicks on the button, a message shows that reports the user if the password is complex enough. The problem is it doesn’t work the way it is supposed to. This is my code, all the commented code is what have I tried, i had a lot more there, but nothing worked, now it only executes the Capital letter code:

//get input element
document.getElementById('passInput').addEventListener('input', isPasswordValid);
//add event listener
document.getElementById('btnSubmit').addEventListener('click',isPasswordValid);


//hide the message in the beginning
//document.getElementsByClassName('message').style.visibility = 'hidden';
//checks if there is at least one uppercase
function hasUppercase (input){
 for (let i=0; i < input.length; i++){
   if (input[i] === input[i].toUpperCase()){
     return true;
   }
 } 
}

//checks if theres at least one lower case letter
function hasLowercase (input){
  for (let i=0; i<input.length; i++){
    if (input[i] === input[i].toLowerCase()){
      return true;
    }
  }
}

//checks if the password is at least 8 characters
function isLongEnough(input){
  if (input.length >= 8){
    return true;
  }
}

//checks if the password has a special character
 let specialCharacters = ['~','!','@','#','$','%','^','&','*','_','?'];
function hasSpecialCharacter(input){
 for (let i=0; i<input.length; i++){
   for(let j=0; j<specialCharacters.length; j++){
     if (input[i] === specialCharacters[j]){
       return true;
     }
   }
 }
}
//get input value
  //let inputValue = document.getElementById('passInput').value;

/*--function that reports to the user if the pass is complex inough, if not tells them what they are missing--*/
function isPasswordValid (input){

  if (hasUppercase(input) && hasLowercase(input) && isLongEnough(input) && hasSpecialCharacter(input)){
   
   // alert('The password is valid');
    console.log('The password is valid');
  //show the message
  return document.getElementById('valid').style.visibility = 'visible';
   
  }
  if (!hasUppercase(input)){
    
   // alert('The password needs a Capital letter');
    console.log('The password needs a Capital letter');
   //show the message
  return document.getElementById('capital').style.visibility = 'visible';
  }
  if (!hasLowercase(input)){
    
    //alert('The password needs a lower letter');
    console.log('The password needs a lower letter');
    //show the message
  return document.getElementById('lower').style.visibility = 'visible';
  
  }
  if (!isLongEnough(input)){
     
    //alert('The password needs to be longer');
    console.log('The password needs to be longer');
   //show the message
  return document.getElementById('longer').style.visibility = 'visible';
    
  }
  if (!hasSpecialCharacter(input)){
    
   // alert('The password needs a special character');
    console.log('The password needs a special character');
   //show the message
  return document.getElementById('special').style.visibility = 'visible';
  
  }
}
/*let input = document.getElementById('passInput');
document.getElementById('passInput').innerHTML = isPasswordValid(passInput);*/
isPasswordValid(passInput);

My HTML is very basic:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Password Verification</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>
 <body>
  <div class="container">
   <h1>Check Your Password</h1>
   <input type="password" id="passInput" placeholder="Type your password..." />
    <input type="button" id="btnSubmit" value="Submit" onclick="return isPasswordValid" />
   </div>

 <div class="message" style='visibility: hidden'>
  <p id='valid'>The password is valid</p>
  <p id='capital'>The password needs a Capital letter</p>
  <p id='lower'>The password needs a lower letter</p>
  <p id='longer'>The password needs to be longer</p>
  <p id='special'>The password needs a special character</p>
 </div>
  
  <script src ="password.js" type = "text/javascript"></script>
 </body>
</html>

If anyone has an idea how to make this work please leave a comment.


#2

That attribute is not needed since you have registered an event listener on the button element.

Speaking of listeners, I have a general rule that stipulates all listeners are registered at the end of the script, not the beginning. In your case it may not be an issue since the functions (callbacks) are all hoisted, but putting the listeners last permits both declared (hoisted) functions and function expressions to be handlers.

As a general consideration, your document is served with a “text/html” MIME Type so does not need to be XML compliant. You can remove all the slashes from your self-closing tags. They are not needed.

Your Submit input can be swapped out in favor of a plain button. That way it has no built in behavior.

<button id="btnSubmit">Submit</button>

#3

Thank you, I fixed the button and moved the listeners at the end of the script. Still not getting the right output. I will try working on it later again. Maybe if I do different projects I will get a better idea for this one.


#4

May I suggest to you that a working copy of this would help us to see the rendering and perhaps be better able to point out deficiencies or errors? repl.it has HTML-CSS-JS in their inventory. Or you could use the Codebits in your CC profile. In any event, please post a link when you have something up and we can take it from there.