La vérification des e-mails avec Javascript ne fonctionne pas malgré une adresse e-mail valide
Je crée deux formulaires en utilisant HTML et Javascript, un pour "Connexion" et un autre pour "S'inscrire". J'utilise JavaScript pour vérifier si la saisie sur le formulaire est valide. Je rencontre un problème où le champ « e-mail » du formulaire « connexion » est correctement validé, mais le champ « e-mail » du formulaire « inscription » n'est pas validé, bien qu'ils utilisent presque le même écouteur d'événement pour valider Entrée. .
Il s'agit d'une version allégée du code que j'utilise pour faire cela
<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>
J'utilise un écouteur d'événement sur chaque formulaire pour gérer l'événement "submit", l'événement "loginForm" fonctionne comme je m'y attendais, mais l'événement "registerForm" affiche un message d'erreur lorsque l'e-mail n'est pas un e-mail valide ou quoi que ce soit. sinon, mettez dans le champ e-mail. Cela me laisse perplexe étant donné que le public est pratiquement le même. Je n'ai pas besoin de soumettre le formulaire à quoi que ce soit, je veux juste comprendre comment fonctionne une validation de formulaire de base. Ce code est un extrait de tout ce que j'ai écrit, mais mes mots de passe, cases à cocher, etc. fonctionnent très bien pour moi. J'ai juste besoin de savoir comment faire fonctionner l'écouteur d'événement "registerForm" de la même manière que l'écouteur d'événement "loginForm".
EDIT : je connais le onclick="validateRegister()" sur le formulaire d'inscription - je l'ai supprimé dans le code, mais le problème persiste.
Toute aide, critique constructive ou blagues amusantes sont appréciées.
Merci.
