A message box won't appear when using an onclick event-CodePudding

I am trying to show a message box for password validation when clicking on an input type password field. i want the message box to show as soon as i click on the password field.

So far, if i run the page and click on the password input field, i would have to click in, click out then click in again just for the message box to appear. I can't really pinpoint the error here since im fairly new to Javascript and HTML.

I am using visual studio code for the IDE and it doesnt appear to show any errors when i run so it has to be an internal issue.

my code is :

function getPassword() {    
            var myInput = document.getElementById("psw");
            var number = document.getElementById("number");
            var length = document.getElementById("length");

            // When the user clicks on the password field, show the message box
        myInput.onfocus = function() {
        document.getElementById("message").style.display = "block";

}   

 // Validate numbers
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }

  // Validate length
  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}

the input type code is as follows:

<label for="psw"><b>Password:</b></label> <br>
<input id = "psw" name="psw" type="password" onblur=" getPassword();"/> <br>


<input type="button" value="check password" class="checkpsw">

My CSS code is :

input {
width: 50%;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;


}
  input[type=radio]{
    position:absolute;
    line-height: 2px;
    
  }
  input[type=checkbox]{
    position:absolute;
    line-height: 2px;
  }
  /* Style the button */
  input[type=button] {
    background-color: #04AA6D;
    color: white;
  }
  .checkpsw {
    background-color: #0fabb6;
    color: white;
  }
  /* Style the container for inputs */
  .container {
    background-color: #f1f1f1;
    padding: 20px;
  }
  
  /* The message box is shown when the user clicks on the password field */
  #message {
    display:none;
    background: #f8f8f8;
    color: #000;
    position: relative;
    padding: 15px;
    margin-top: 10px;
    width:50%;
  }
  
  #message p {
    padding: 10px 35px;
    font-size: 18px;
  }
  
  /* Add a green text color and a checkmark when the requirements are right */
  .valid {
    color: green;
  }
  
  .valid:before {
    position: relative;
    left: -35px;
    content: "\2714";
  }
  
  /* Add a red text color and an "x" icon when the requirements are wrong */
  .invalid {
    color: red;
  }
  
  .invalid:before {
    position: relative;
    left: -35px;
    content: "\2716";
  }

CodePudding user response：

Use the myInput.onfocus = function() outside of the getPassword function block.

CodePudding user response：

You need to modify your code in this way. It will solve your problem. Basically, when you go to the password field it will be focus So anything you want to do at that time. You can do like if you want to change the border color on the focus you can do it as well.

// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
    document.getElementById("message").style.display = "block";
}
function getPassword() {    
            var myInput = document.getElementById("psw");
            var number = document.getElementById("number");
            var length = document.getElementById("length");       
 // Validate numbers
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }

  // Validate length
  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}