Validierung in Forms
In unserem Projekt zeigen wir, wie man mit HTML-Code Eingabefelder mit Validierung in Formularen erstellen und anschließend durch CSS und JavaScript weiter verbessern kann.
HTML
Zunächst schauen wir uns an, wie man mit HTML-Code ein einfaches Formular mit Validierung erstellen kann.
Man sollte anmerken, dass bei reinem HTML-Code die Visualisierung der Validierung vom Browser übernommen wird.
Damit der Browser die unterschiedlichen Eingabefelder erkennt, werden diese zunächst definiert. In unserem Beispiel also als Text-, E-Mail- und Passwort-Feld.
Als erstes legen wir unser Zeichenset, die Sprache und den Titel fest.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML-Formular mit Validierung</title>
</head>
<body>Danach erstellen wir unser erstes Eingabefeld, in diesem Fall das Namens-Feld.
Bei reinem HTML Code ist es wichtig, die minimale Zeichenanzahl mit in die Feldbeschreibung zu integrieren, da ohne CSS und Java Script bis zum Absenden des Formulars keine zusätzliche Meldung geöffnet wird.
Außerdem sollte der Input Typus für dieses Feld als "text" definiert werden, damit jede Zeichen-Eingabe möglich ist und der Browser weiß, dass es sich um ein Text-Eingabe-Feld handelt.
Die minimale Zeichenlänge wird dann über required minlength festgelegt.
<form>
<div class="form-group">
<label for="name">Name (mind. 3 Zeichen):</label>
<input type="text" id="name" name="username" required minlength="3">
</div>Das E-Mail-Feld wird ebenfalls als solches definiert type="email", damit der Browser später fehlende @-Zeichen erkennt und die dazugehörige Fehlermeldung sendet. Durch required wird es außerdem zum Pflichtfeld.
<div class="form-group">
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required>
</div>type="password" sorgt für eine Maskierung der Eingabe. Auch hier definieren wir wieder eine minimale Zeichenlänge.
Wichtig: Das Passwort-Feld unterscheidet sich nur durch die Maskierung vom Text-Feld. Die Daten werden nicht gesondert gesichert und können abgefangen werden.
<div class="form-group">
<label for="password">Passwort (mind. 6 Zeichen):</label>
<input type="password" id="password" name="password" required minlength="6">
</div>Zum Schluss erstellen wir noch mit <button type="submit">Absenden< unseren Absende-Button.
<button type="submit">Absenden</button>
</form>Bei falscher Eingabe erkennt der Browser nun unsere, im Code definierten, Eingabefelder und gibt je nach Feld unterschiedliche Fehlermeldungen aus.
HTML + CSS
Hier wird die Schriftart Segoe UI festgelegt. Zusätzlich wir der Seitenhintergrund hellgrau eingefärbt.
Mit display flex , justify-content: center und align-items: center wird der Inhalt horizontal und vertikal zentriert.
Außerdem wird die Seite hier der Höhe der sichtbaren Browserseite angepasst und die Standardabstände entfernt.
<style>
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f2f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}Die Hintergrund Farbe wird als weiß festgelegt. Das padding bestimmt den Abstand und border radius den Eckradius.box shadow sorgt für einen leichten Innenschatten.
Die Breite ist auf maximal 400 px begrenzt, sie kann sich aber auch an kleinere Bildschirme anpassen.
form {
background-color: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}Die Formularüberschrift wird zentriert und leicht nach unten eingerückt, damit sie sich optisch vom Rest abhebt.
Jede Gruppe von Eingabe-Feldern und Labeln bekommen einen gleichmäßigen Abstand nach unten, um ein sauberes Layout zu erzeugen.
Die Beschriftungen der jeweiligen Felder wird als oberhalb festgelegt.
Sie sind zudem leicht abgesetzt margin-bottom, grau gefärbt color: #555 und leicht fett dargestellt font-weight: 500.
h2 {
text-align: center;
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
color: #555;
font-weight: 500;
}In diesem Abschnitt wird das Design der Eingabefelder festgelegt. Sie erhalten einen Innenabstand, abgerundete Ecken und einen hellgrauen Rand. Mit transition sieht man beim Fokus oder Fehler weiche Animationen, z. B. wenn sich die Farbe ändert.
Wenn ein Benutzer in ein Feld klickt, wird es blau umrandet und erhält einen dezenten Leuchtrand, was durch einen eingefärbten box-shadow geschieht.
Unter anderem werden hier zudem noch diese zwei Regeln eingerichtet welche dem Benutzer sofort anzeigen, ob das Feld korrekt ausgefüllt ist:
Rot (
#dc3545) bei FehlernGrün (
#28a745) bei gültiger Eingabe
input {
width: 100%;
padding: 0.6rem;
border: 2px solid #ccc;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus {
border-color: #0077ff;
box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.2);
outline: none;
}
input:invalid {
border-color: #dc3545;
}
input:valid {
border-color: #28a745;
}Als letztes wird der Absenden-Button eingerichtet mit dem Das Formular schließlich abgeschlossen wird.
Der Button erhält ein kräftiges blau mit weißem Text und abgerundeten Ecken. Somit setzt sich der Button deutlich vom Rest ab und ist klar erkennbar.
cursor: pointer und transition: background 0.3s sorgen zudem dafür, dass der Button beim hovern die Farbe wechselt.
Wenn die Maus über den Button geht, wird er dunkler blau – so erkennt der Nutzer, dass der Button aktiv ist.
button {
width: 100%;
padding: 0.75rem;
border: none;
background-color: #0077ff;
color: white;
font-size: 1rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #005fcc;
}
</style>HTML + CSS + JavaScript
Nachdem unsere Form-Objekte nun erstellt und Designed wurden, betrachten wir zuletzt die Möglichkeit, die Validierung durch JavaScript anzupassen.
Zunächst greifen wir auf die HTML Input-felder zu.
document.getElementById("name") : Sucht im HTML Code nach einem Element mit der ID "name".
Dasselbe gilt für "email" und "password".
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");Im nächsten Schritt führen wir die Funktion validateField ein, sie überprüft jedes Eingabefeld und je nach Ergebnis wird das Design und die Validierungseinstellungen angepasst.
Es werden 3 Parameter untersucht:
input: Welches Eingabefeld? (Name, Email oder Passwort).
condition: Ein Wahrheitswert der angibt, ob ein Feld gültig ist (true/false).
message: Eine Fehlermeldung, die angezeigt wird, wenn das Feld ungültig ist.
Bedingung ist falsch ( if (!condition) ) : Der Rand des Eingabefeldes wird rot und eine benutzerdefinierte Fehlermeldung wird ausgegeben.
Bedingung ist wahr ( else ) : Der Rand des Eingabefeldes wird grün und es gibt keine Fehlermeldung.
function validateField(input, condition, message) {
if (!condition) {
input.style.borderColor = "#dc3545"; // rot
input.setCustomValidity(message);
} else {
input.style.borderColor = "#28a745"; // grün
input.setCustomValidity("");
}
}Nun befassen wir uns mit der Validierung beim Verlassen eines Feldes.
In der ersten Zeile wird ein Event-Listener auf das nameInput-Feld angewendet.
Ein Event-Listener in JavaScript ist eine Funktion, die darauf wartet, dass ein bestimmtes Ereignis (Event) auf einem HTML-Element passiert.
addEventListener("blur", () : bedeutet, dass die Funktion aufgerufen wird, sobald das Feld den Fokus verliert.
nameInput.value.trim().length >= 3 : Dies entfernt leerzeichen am Anfang und Ende des Eingabefeldes und prüft ob der Name mindestens 3 Zeichen enthält.
Wenn dies nicht zutrifft, wird die Fehlermeldung gesetzt: "Der Name muss mindestens 3 Zeichen lang sein."
nameInput.addEventListener("blur", () => {
const isValid = nameInput.value.trim().length >= 3;
validateField(nameInput, isValid, "Der Name muss mindestens 3 Zeichen lang sein.");
});Dieses Validierungsschema ist für Textfelder jeglicher Art anwendbar, jedoch muss die Definition der Regeln (Anzahl der Zeichen... etc.) immer passend zum Text-Feld vorgenommen werden.
Im folgenden wird diese Validierungstechnik auch auf das Passwort-Feld angewendet
passwordInput.addEventListener("blur", () => {
const isValid = passwordInput.value.length >= 6;
validateField(passwordInput, isValid, "Das Passwort muss mindestens 6 Zeichen lang sein.");
});Damit eine Email als solche erkannt wird, bentötigen wir spezielle zeichen innerhalb der Angabe.
Dazu gehören ein ät-Zeichen ("@") sowie die endung einer Domain mit einem Punkt (".")
Der pattern prüft genau dieses typische E-mail-Adressen Format:
^[^\s@]+@[^\s@]+\.[^\s@]+$ ist ein regulärer Ausdruck (RegEx), er stellt sicher das die E-Mail ein "@" besizt und ein "." nach dem "@" folgt.
Wenn das E-Mail Format ungültig ist erscheint die Fehlermeldung: "Bitte gib eine gültige E-Mail-Adresse ein (z. B. name@example.com)."
emailInput.addEventListener("blur", () => {
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const isValid = pattern.test(emailInput.value);
validateField(emailInput, isValid, "Bitte gib eine gültige E-Mail-Adresse ein (z. B. name@example.com).");
});Im letzten Teil setzen wir die Fehlermeldungen der Eingaben zurück, wenn der Benutzer seine Eingabe im besagten Feld anpasst.
Der Event-Listener input wird auf alle drei Eingabefelder angewendet
input.addEventListener("input", () => { sobald der Benutzer mit der Eingabe beginnt ( input ) wird die Fehlermeldung zurückgesetzt. Dies geschieht indem input.setCustomValidity(""); aufgerufen wird.
Dies ist besonders hilfreich wenn man für verschiedene Fehler verschieden Fehlermeldungen erstellt.
Bsp.: Passwort mit 6 Buchstaben und 2 Ziffern erforderlich
Benutzer hat 6 buchstaben jedoch nur 1 Ziffer Fehlermeldung: "Überprüfen sie ob die Anzahl der Ziffern korrekt ist"
Benutzer hat nur 5 Buchstaben und 2 Ziffern Fehlermeldung: "Überprüfen sie ob die Anzahl der Buchstaben korrekt ist"
[nameInput, emailInput, passwordInput].forEach(input => {
input.addEventListener("input", () => {
input.setCustomValidity("");
});
});Quellen
CodePenIO
Downloads:
