recherche

Maison  >  Questions et réponses  >  le corps du texte

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.

P粉287345251P粉287345251236 Il y a quelques jours448

répondre à tous(1)je répondrai

  • P粉364129744

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

    On dirait que vous essayez de vérifier la validité des email 输入元素的有效性，但您应该检查 register-email 事件侦听器上的 register-email éléments de saisie sur deux formulaires.

    Changement : 

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

    À : 

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

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

    Ça ne devrait poser aucun problème

    Edit 1 : Ofc vous pouvez déclarer ci-dessus l'écouteur d'événement registerEmail

    répondre
    0
  • Annulerrépondre