Step 1:create a password validation form

<div class="container">
  <form action="/action_page.php">
    <label for="usrname">Username</label>
    <input type="text" id="usrname" name="usrname" required>

    <label for="psw">Password</label>
  <  input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z]) (?=.*[A- Z]).{ 8,}" title ="Must contain minimum one number and one uppercase and lowercase letter, and at minimum 8 or more characters" required>

    <input type="submit" value="Submit">
  </form>
</div>

<div id="message">
  <h3>Password must contain the following:</h3>
  <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
  <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
  <p id="number" class="invalid">A <b>number</b></p>
  <p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>

note:To set a restriction for submitting the form, we use the pattern attribute (with a regular expression) within the password field: it must contain 8 or more characters, at least one number, and one uppercase and lowercase letter.

Step 2

{
    letter.classList.remove("valid");
    letter.classList.add("invalid");
}

  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
} else

{
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  // 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");
}

  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
} else {
    length.classList.remove("valid");
    length.classList.add("invalid");}
</script><script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");

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

// When the user clicks overside of the password area,not show the message box
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}

// When the user began type something inside the passwordarea
myInput.onkeyup = function() {

  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
} else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
}


  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
} else {

//
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  //
  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");
}

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

Create a Login form with JavaScript Validation DUMMY DATA: - Username: Admin1 - Password: Admin1 Display an error message if the inputted data did not match on the given username and password above.

Public Answer

Create a Login form with JavaScript Validation

DUMMY DATA:

- Username: Admin1

- Password: Admin1

Display an error message if the inputted data did not match on the given username and password above.