Validate HTML forms using JavaScript

I challenged my self to create a simple html form using JavaScript yet I’m not sure if what I’m coding is right. I’m still a beginner in this language I hope someone could clarify me from my mistakes.

Input fields listed below and use JavaScript to validate them (use an internal declaration):

  1. Name: Any input will be accepted. Must be required.
  2. Birthday: Only 18 years and up only. Must be required.
  3. Email Address: Gmail are only accepted. Must be required.
  4. Email Address Confirmation: Email Address input must match. Must be required.
  5. Password: At least one capital letter, one number, and one special character must be included in the password. A total of eight characters are required.
  6. Password Confirmation: Password input must match. Must be required.

This is my code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container">
   <!-- Input Name -->
  <form action="submitted.html">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <br><br>

    <!-- Input Email -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" pattern="[a-z0-9._%+-][email protected]" title="Email must only be from Gmail" required>
    <br><br>

    <!-- Input Confirm Email -->
    <label for="ConfirmEmail">Confirm Email:</label>
    <input type="email" id="ConfirmEmail" name="ConfirmEmail" pattern="[a-z0-9._%+-][email protected]" title="Email must only be from Gmail" required>
    <br><br>
    
    <!-- Input Password -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" pattern="^(?=.*[0-9])(?=.*[A-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,8}$" title="Password must have at least 1 Capital Letter, 1 Number, and 1 special character. Must have a total of 8 characters." required>
    <br><br>

    <!-- Input Confirm Password -->
    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" pattern="^(?=.*[0-9])(?=.*[A-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,8}$" title="Input must be the same with password." required>
    <br><br>

    <!-- Submit Button -->
    <input type="submit" value="Submit">
  </form>
</div>
                
<script>
var myEmail = document.getElementById("email");
var myConfirmEmail = document.getElementById("confirmEmail");
var myPassword = document.getElementById("password");
var myConfirmPassword = document.getElementById("confirmPassword");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var special = document.getElementById("special");
var length = document.getElementById("length");

myEmail.onkeyup = function(){
  // Email: Confirm
  function matchEmail(){
  if(myEmail != myConfirmEmail){   
    myConfirmEmail.classList.remove("invalid");
    myConfirmEmail.classList.add("valid");  
  }else{  
    myConfirmEmail.classList.remove("valid");
    myConfirmEmail.classList.add("invalid"); 
  }  
}  

}

// When the user starts to input there is a pop-up text or validation reminder
myPassword.onkeyup = function(){

  // Password: Validate capital letters
  var capital = /[A-Z]/g;
  if(myPassword.value.match(capital)){  
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  }else{
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

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

  // Password: Validate special characters
  var special = /(?=.*[!@#$%^&*])/g;
  if(myPassword.value.match(special)){  
    special.classList.remove("invalid");
    special.classList.add("valid");
  }else{
    special.classList.remove("valid");
    special.classList.add("invalid");
  }

  // Password: Validate length exactly 8 characters
  if(myPassword.value.length == 8){
    length.classList.remove("invalid");
    length.classList.add("valid");
  }else{
    length.classList.remove("valid");
    length.classList.add("invalid");
  }

  // Password: Confirm
  function matchPassword(){  
  var pw1 = document.getElementById("myPassword");  
  var pw2 = document.getElementById("myConfirmPassword");  
  if(pw1 != pw2){   
    myConfirmPassword.classList.remove("invalid");
    myConfirmPassword.classList.add("valid");  
  }else{  
    myConfirmPassword.classList.remove("valid");
    myConfirmPassword.classList.add("invalid"); 
  }  
}   

}
</script>

</body>
</html>

I still haven’t finish it because I was stuck at the email address confirmation. Thank You!