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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
It looks like you are trying to check the validity of the
emailinput element on both forms, but you should check theregister on theregister-emailevent listener -emailValidity 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
above the event listenerregisterEmail