suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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.

P粉287345251P粉287345251236 Tage vor449

Antworte allen(1)Ich werde antworten

  • P粉364129744

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

    看起来您正在尝试检查两个表单上的 email 输入元素的有效性，但您应该检查 register-email 事件侦听器上的 register-email 输入元素的有效性。

    更改：

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

    应该没问题

    编辑1：Ofc您可以在事件侦听器上方声明 registerEmail

    Antwort
    0
  • StornierenAntwort