Javascript email validation is not working even though the email is valid

Question

I'm making two forms with html and javascript, one for "log in" and one for "register". Im using javascript to check that the inputs on the forms are valid. Im running into an issue where the "email" field on the "log in" form is being validated properly, but the "email" field on my "register" form is not, although they are using nearly identical event listeners to validate the inputs.

this is a condensed version of the code that I am using to do this

<html>
    <form class="forms" id="login-form" onsubmit="return false" novalidate>
        <h1>Log In</h1>
        <div class="form-div">
            <label for="email">Your Email:</label>
            <input type="email" id="email" name="email" required>
            <span class="error"></span>
        </div>
        <button class="wide-buttons" type="submit">Log In</button>
        <p onclick="toggleForms()">Need an account? Click here to sign up!</p>
      </form>
      <form class="forms" id="register-form" onsubmit="return false" novalidate>
        <h1>Register</h1>
        <div class="form-div">
            <label for="email">Your Email:</label>
            <input type="email" id="register-email" name="register-email" required>
            <span class="error"></span>
        </div>
        <button class="wide-buttons" type="submit" onclick="validateRegister()">Sign Up</button>
        <p onclick="toggleForms()">Already have an account? Click here to log in!</p>
      </form>
      <script>
        const loginForm = document.getElementById("login-form");
        const emailError = document.querySelector("#email + span.error");
        const registerForm = document.getElementById('register-form');
        const regEmailError = document.querySelector("#register-email + span.error");

        loginForm.addEventListener("submit", (event) => {
            if (!email.validity.valid) {
                emailError.textContent = "You must enter a valid email address";
            }
        });

        registerForm.addEventListener("submit", (event) => {
            if (!email.validity.valid) {
                regEmailError.textContent = "You must enter a valid email address";
            }
        });
     </script>

Im using event listeners for a "submit" event on each form and the one for "loginForm" Is working the way that I intend it to, but the one for "registerForm" is showing my error message when the email is a valid email or anything else is put into the email field. Im stumped by this considering the listeners are practically identical. I don't need to actually submit the form to anything, I'm just trying to learn how some basic form validation works. This code is a snippet of everything else that I have written, but my passwords, checkboxes, etc. are working fine for me. I just need to know how to get the "registerForm" event listener to work the same way that the "loginForm" one is.

edit: Im aware of the onclick="validateRegister()" on the register form- I have removed this in my code and I am still having the issue.

Any help, constructive criticism, or funny jokes are appreciated.

thanks.

Answer 1

It looks like you are trying to check the validity of the email input element on both forms, but you should be checking the validity of the register-email input element on the registerForm event listener.

Change:

if (!email.validity.valid) {
  regEmailError.textContent = "You must enter a valid email address";
}

To:

const registerEmail = document.getElementById('register-email');

if (!registerEmail.validity.valid) {
  regEmailError.textContent = "You must enter a valid email address";
}

and it should be ok

Edit1: Ofc you can declare registerEmail above event listener

Javascript email validation is not working even though the email is valid

Question

1 answers

solution1
0 2023-01-10 01:02:11

Javascript email validation is not working even though the email is valid

Question

1 answers

solution1 0 2023-01-10 01:02:11

solution1
0 2023-01-10 01:02:11