Benutzerdefinierte Fehlermeldungen

Teil des Abschnitts JavaScript in Aktion der HTML-Journey von Coddy. Lektion 6 von 27.

Benutzerdefinierte Fehlermeldungen helfen Nutzern zu verstehen, was mit ihren Formulareingaben nicht stimmt. Lass uns lernen, wie wir sie für die Formularvalidierung erstellen und anzeigen.

Erstellen wir zunächst ein einfaches Eingabefeld und ein danebenliegendes Span-Element, in dem wir die Nachricht anzeigen:

<input type="text" id="username" placeholder="Enter username">
<span id="usernameError" class="error"></span>

Fügen wir nun JavaScript hinzu, um die Eingabe zu überprüfen und eine benutzerdefinierte Fehlermeldung anzuzeigen:

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    if (this.value.length < 5) {
        usernameError.textContent = "Username must be at least 5 characters long";
        usernameError.style.color = "red";
    } else {
        usernameError.textContent = "";
    }
});

Wenn ein Benutzer etwas in das Eingabefeld eingibt, prüft der Ereignis-Listener, ob der Benutzername mindestens 5 Zeichen lang ist. Wenn nicht, zeigt er eine rote Fehlermeldung an.

Aufgabe

Einfach

Wir haben bereits eine Seite mit einem Eingabefeld für die E-Mail-Adresse und einem Nachrichtenbereich darunter.

Deine Aufgabe: Füge innerhalb des Ereignis-Listeners eine if-else-Anweisung hinzu, die prüft, ob der Eingabewert das @-Symbol enthält.

Wenn ja → zeige die Nachricht „Looks good!“
Andernfalls → zeige die Nachricht „Please enter a valid email address“

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Custom error messages</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="form-container">
    <h2>Create Your Account</h2>
    <p class="subtitle">Join our newsletter for the latest updates</p>

    <form>
      <label for="email">Email Address</label>
      <input type="text" id="email" placeholder="e.g. user@example.com">
      <span id="emailError" class="message"></span>

      <button type="button">Subscribe</button>
    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>