Benutzerdefinierte Fehlermeldungen

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

Benutzerdefinierte Fehlermeldungen helfen Benutzern zu verstehen, was mit ihrer Formulareingabe nicht stimmt. Lernen wir, wie man sie für die Formularvalidierung erstellt und anzeigt.

Zuerst erstellen wir ein einfaches Eingabefeld und ein span-Element daneben, in dem wir die Nachricht anzeigen werden:

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

Fügen wir nun JavaScript hinzu, um die Eingabe zu validieren 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 in das Eingabefeld tippt, prüft der Event-Listener, ob der Benutzername mindestens 5 Zeichen lang ist. Falls nicht, wird eine rote Fehlermeldung angezeigt.

Aufgabe

Einfach

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

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

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

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>