E-Mail-Verifizierung mit Javascript funktioniert trotz gültiger E-Mail-Adresse nicht
Ich erstelle zwei Formulare mit HTML und Javascript, eines für „Anmelden“ und eines für „Registrieren“. Ich verwende JavaScript, um zu überprüfen, ob die Eingabe im Formular gültig ist. Ich stoße auf ein Problem, bei dem das Feld „E-Mail“ im Anmeldeformular korrekt validiert wird, das Feld „E-Mail“ im Anmeldeformular jedoch nicht validiert wird, obwohl zur Validierung von Enter fast derselbe Ereignis-Listener verwendet wird .
Dies ist eine abgespeckte Version des Codes, den ich dafür verwende
<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>
Ich verwende auf jedem Formular einen Ereignis-Listener, um das „submit“-Ereignis zu verarbeiten. Das „loginForm“-Ereignis funktioniert wie erwartet, aber das „registerForm“-Ereignis zeigt eine Fehlermeldung an, wenn die E-Mail keine gültige E-Mail oder ähnliches ist sonst in das E-Mail-Feld eingeben. Das verwirrt mich, wenn man bedenkt, dass das Publikum praktisch dasselbe ist. Ich muss das Formular eigentlich an niemanden senden, ich möchte nur verstehen, wie eine grundlegende Formularvalidierung funktioniert. Dieser Code ist ein Ausschnitt von allem anderen, was ich geschrieben habe, aber meine Passwörter, Kontrollkästchen usw. funktionieren bei mir einwandfrei. Ich muss nur wissen, wie der Ereignis-Listener „registerForm“ genauso funktioniert wie der Ereignis-Listener „loginForm“.
BEARBEITEN: Mir ist das onclick="validateRegister()" im Registrierungsformular bekannt – ich habe es im Code entfernt, aber das Problem besteht weiterhin.
Jede Hilfe, konstruktive Kritik oder lustige Witze sind willkommen.
Vielen Dank.
