Eingabevalidierung

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

Beim Erstellen von Formularen ist es wichtig, Benutzern sofortiges Feedback während der Eingabe zu geben, damit sie keine falschen Informationen absenden. Dies wird als Echtzeit-Validierung bezeichnet.

Zuerst erstellen wir 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ügen Sie 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() {
    // Aktuellen Wert abrufen
    const value = this.value;
    
    // Prüfen, ob er 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 lang ist, 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 validiert.

Ihre Aufgabe ist es, die Zeile innerhalb des bestehenden <strong>if</strong>-Blocks so zu vervollständigen, dass:

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>