Eingabevalidierung

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

Beim Erstellen von Formularen ist es wichtig, Nutzern bereits während der Eingabe sofortiges Feedback zu geben, damit sie keine falschen Informationen absenden. Das nennt man Echtzeitvalidierung.

Erstellen wir zunächst ein einfaches Texteingabefeld. Wir möchten prüfen, ob der Benutzername mindestens 5 Zeichen lang ist.

<input type="text" id="username" placeholder="Enter username">

Füge nun einen Event-Listener hinzu, um die Eingabe zu validieren, während der Benutzer tippt:

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

usernameInput.addEventListener('input', function() {
    // Den aktuellen Wert abrufen
    const value = this.value;
    
    // Prüfen, ob der Wert unsere Kriterien erfüllt
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

Der Rahmen wird rot, wenn der Benutzername weniger als 5 Zeichen hat, und grün, wenn er gültig ist.

Aufgabe

Einfach

Wir haben eine Seite mit einem E-Mail-Eingabefeld. Derzeit wird das E-Mail-Format nicht überprüft.

Deine Aufgabe ist es, die Zeile innerhalb des vorhandenen if-Blocks zu vervollständigen, sodass:

Wenn die E-Mail "@" enthält,
der Rahmen des Eingabefelds zu "2px solid rgb(0, 250, 0)" wird.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

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