search

Home  >  Q&A  >  body text

Email verification with Javascript not working despite valid email address

I am making two forms using html and javascript, one for "Login" and another for "Register". I'm using JavaScript to check if the input on the form is valid. I'm running into an issue where the 'email' field on the 'login' form is validating correctly, but the 'email' field on the 'signup' form is not validating, although they use almost the same event listener to validate enter.

This is a condensed version of the code I'm 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>

I'm using an event listener on each form to handle the "submit" event, the "loginForm" event works the way I expected, but the "registerForm" event showing an error message when the email is an email will work Email or anything else into the email field. I'm confused by this considering the audience is virtually the same. I don't need to actually submit the form to anything, I just want to understand how some basic form validation works. This code is a snippet of everything else I've written, but my passwords, checkboxes, etc. work just fine for me. I just need to know how to make the "registerForm" event listener work the same way as the "loginForm" event listener.

Edit: I'm aware of the onclick="validateRegister()" on the registration form - I've removed it in the code, but the problem persists.

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

Thanks.

P粉287345251P粉287345251236 days ago442

reply all(1)I'll reply

  • P粉364129744

    P粉3641297442024-03-31 12:00:21

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

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

    should be no problem

    Edit 1: Ofc you can declare registerEmail

    above the event listener

    reply
    0
  • Cancelreply