Benutzerdefinierte Fehlermeldungen

Teil des Abschnitts JavaScript in Aktion 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 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 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 etwas in das Eingabefeld eingibt, prüft der Ereignis-Listener, ob der Benutzername mindestens 5 Zeichen lang ist. Falls 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 Event-Listeners eine if-else-Anweisung hinzu, die prüft, ob der Eingabewert das <strong>@</strong>-Symbol enthält.

Wenn dies der Fall ist → 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>