validation - re-enter email validator not working on javascript

Question

So I'm trying to check if the user inputs the same email address and password twice in a signup form using javascript. It shouldn't let them sign up if they don't match, however only the portion of the passwords is working and the email isn't working. Here's my code:

<form>
           
    <input type="email" name="fname" placeholder="Email Adress" required="required" class="input-txt" id="email1">
    <input type="email" name="fname" placeholder="Confirm Email Adress" required="required" class="input-txt" id="email2"> 
    <br><br>
    <input id="password" type="password" name="fname" placeholder="Create Password" required="required" class="input-txt">
    <input id="confirm_password" type="password" name="fname" placeholder="Confirm Password" required="required" class="input-txt"><br>
    <button type="submit" class="btn">Sign up</button>
</form>

<script>
function validateMail() {
    if(first_email.value != second_email.value) {
        email2.setCustomValidity("Emails Don't Match");
    } else {
        email2.setCustomValidity('');
    }
}
email1.onchange = validateMail;
email2.onkeyup = validateMail;

var password = document.getElementById("password")
  , confirm_password = document.getElementById("confirm_password");

function validatePassword(){
    if(password.value != confirm_password.value) {
        confirm_password.setCustomValidity("Passwords Don't Match");
    } else {
        confirm_password.setCustomValidity('');
    }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
</script>

Answer 1

You need to assign var in top of the script:

 var first_email = document.getElementById("email1")
  , second_email = document.getElementById("email2")
  , password = document.getElementById("password")
  , confirm_password = document.getElementById("confirm_password");