HTML/Tutorials/Formulare/browsereigene Validierung
Es ist sinnvoll, HTML-basierte Formulare nicht erst serverseitig, sondern zusätzlich schon vor dem Absenden clientseitig auf Validität zu überprüfen. HTML5 bietet einige Möglichkeiten, Eingaben von input-Elementen bereits während der Eingabe zu validieren. Auch wenn diese Validierungen eine spätere serverseitige Überprüfung nicht ersetzen, werden falsche Eingaben sofort durch CSS sichtbar gemacht und können ohne weitere HTTP-Requests korrigiert werden. Die Pseudoklassen :valid für gültige und :invalid für falsche Eingaben selektieren Formularelemente auf die Gültigkeit einer Eingabe hin. Das Ergebnis kann mit den Möglichkeiten von CSS entsprechend angezeigt werden.
Achtung!
Inhaltsverzeichnis
Verschiedene input-Typen
Eingabefelder für Passwörter (mit type="password") sind schon aus dem vorigen Kapitel bekannt. Sie ermöglichen die verdeckte Eingabe beliebiger Zeichen. Nach dem Absenden des Formulars werden sie serverseitig überprüft.
Mit HTML5 wurden für das input-Element neue Typen eingeführt, die ein jeweiliges Format vorschreiben. Bei E-Mail-Adressen, Zahlen und Daten ist es nun möglich, bereits beim Ausfüllen eine browsereigene Validierung vorzunehmen, d. h. die Eingabe auf Gültigkeit zu überprüfen. Ungültige Eingaben werden gleich zurückgewiesen und nicht erst zum Server gesandt.
Eingabe von E-Mail-Adressen
Im folgenden Formular werden zum Login E-Mail-Adresse und Passwort abgefragt:
Das Eingabefeld erhält einen type="email". So überprüfen die Browser mittels eines regulären Ausdrucks, ob die Eingabe den Konventionen einer E-Mail-Adresse entspricht. Bei einer ungültigen Eingabe wird das Feld rot umrandet, wenn es den Fokus verlässt.
Entweder verwenden die Benutzer aus Bequemlichkeit immer den gleichen Benutzernamen und womöglich sogar dasselbe Passwort oder sie vergessen es bis zum nächsten Einloggen und müssen die Login-Daten erst wieder anfordern. Die E-Mailadresse ist dagegen eindeutig und unverwechselbar.
Eingabe von Zahlen und Daten
Zur Anmeldung auf einer Webseite benötigen wir noch das Alter und Geburtsdatum. (Aus Gründen der Benutzerfreundlichkeit wäre es besser, das Formular so einfach wie möglich zu halten; nur das Geburtsdatum zu erheben und das Alter auszurechnen.)
Bei input type="number" erscheinen im Eingabefeld rechts zwei Pfeile, mit denen Sie den Wert schrittweise erhöhen oder senken können – eine Eingabe per Tastatur ist natürlich ebenfalls möglich. Die Eingabe von Buchstaben und Sonderzeichen wird in Chromium abgewiesen, im Firefox hingegen nicht.
Bei input type="date" erscheint im Eingabefeld ein placeholder mit der Formatierung TT.MM.JJJJ, der dem Nutzer bei der Eingabe hilft. Bei einem Klick in das Feld erscheint bei mobilen Geräten und modernen Browsern ein benutzerfreundliches Kalenderfeld, auf dem Sie das Datum nur anklicken müssen.
Diese neuen Typen gibt es mittlerweile in allen Browsern; eine Datumseingabe jedoch nicht mit den IE 9-11. Hier wird ein normales Texteingabefeld gerendert.
Im Kurs Formulare und JavaScript stellen wir Ihnen noch einen Schieberegler zur stufenlosen Eingabe von numerischen Werten vor.
Attribute
Wäre es nicht gut, beim Geburtsdatum „unmögliche“ Werte wie das gestrige oder ein 200 Jahre zurückliegendes Datum auszuschließen? Das ist mit zusätzlichen Attributen des input-Elements möglich!
Eingabemuster mit pattern
Mit dem pattern-Attribut können Sie die Eingaben von input-Elemente gegen einen regulären Ausdruck hin überprüfen, ob die Eingabe den Erwartungen entspricht. Für die Eingabe von Zahlen, Telefonnummern und E-Mail-Adressen gibt es bereits eigene Typen, sodass Sie keine weiteren Einstellungen vornehmen müssen.
Details: caniuse.com
In diesem Beispiel soll die Altersangabe mindestens 18, höchstens jedoch 99 sein. Höhere, bzw. niedrigere Eingaben sollen zurückgewiesen werden:
Die Eingabe wird vor dem Absenden des Formulars auf Korrektheit überprüft. Das pattern-Attribut enthält einen regulären Ausdruck: (1[89]|[2-9][0-9])) → Bei einer 1 als ersten Zahl dürfen 8 oder 9 folgen, bei einer 2-9 alle Zahlen von 0-9.
Damit sind auch komplexere Abfragen möglich; die dabei verwendeten RegEx sind jedoch nicht trivial:
Hier wird für das englische Datumsformat überprüft, ob die (im Englischen führende) Jahreszahl mit 19 oder 20 beginnt. Anschließend werden für die Monate nur 1-12 akzeptiert, dann für die Monate entweder 30, für den Monat 02 nur 29 und für die Monate 1,3,5,7,8 dann 31 Tage.
Ober- und Untergrenzen mit max und min
Im Allgemeinen ist der Einsatz solch regulärer Ausdrücke nicht nötig – HTML5 bietet dafür mit den Attributen min und max, mit denen Sie Ober- und Untergrenzen festlegen können, bequemere Alternativen:
input {
border: 1px solid black;
}
input:in-range {
background-color: rgb(0 255 0 / 0.25);
}
input:out-of-range {
background-color: rgb(255 0 0 / 0.25);
border: medium solid red;
}
input:in-range + ::after {
content:' ✔';
}
input:out-of-range + ::after {
content:' außerhalb des Bereichs!';
}
<form action="" id="form1">
<label for="alter">Ihr Alter ist: </label>
<input id="alter" name="altersangabe" type="number" placeholder="6 bis 99" min="6" max="99">
<span></span>
</form>
Die Breite der Input-Felder lässt sich im Übrigen sogar in Abhängigkeit vom Wert für maxlength mit CSS formatieren.[1]
Mindest- und Maximallänge von Eingaben mit min-/maxlength
Durch das maxlength- Attribut können Sie eine Maximallänge der Eingabe festlegen.
Details: caniuse.com
Analog dazu können Sie mit dem minlength-Attribut eine Mindestlänge der Eingabe festlegen.
Details: caniuse.com
<form>
<label for="benutzername">Benutzername</label>
<input id="benutzername" minlength="5" maxlength="8">
<label for="passwd">Passwort</label>
<input type="password" minlength="5" maxlength="8">
<button>anmelden</button>
</form>
Pflichtfelder mit required
Pflichtfelder erhalten das required-Attribut (engl. für erforderlich). Solange die Eingaben nicht valide sind, wird ein Absenden des Formulars verhindert und eine Fehlermeldung ausgegeben.
Details: caniuse.com
Es könnte empfehlenswert sein, die browsereigene Gültigkeitsüberprüfung abzuschalten und durch eigene JavaScripte zu ersetzen.
Anwendungsbeispiel
Validierung der Eingabe
Es ist sinnvoll, Pflichtfelder zu kennzeichnen. Häufig geschieht das durch einen Asterisk *. In diesem Beispiel ändert sich die Kennzeichnung zu einem Haken ✔, sobald die Eingabe valide ist. Durch Verwendung der Pseudoklassen :valid, :invalid können Sie die Eingabe überprüfen:
form {
width: 30em;
padding-top: 3em;
position: relative;
}
input {
margin: 0 0 1em 31%;
padding: .2em .5em;
width: 60%;
background-color: #fffbf0;
border: 1px solid #e7c157;
}
label {
text-align: right;
line-height: 1.5;
width: 30%;
position: absolute;
left: 0;
}
label::after {
content: ": ";
}
button {
margin-left: 31%;
}
input:required + label::before {
position: absolute;
left: 300%;
content: "★";
color: red;
}
input:required:valid + label::before {
content: "✔";
color: green;
}
<form>
<input id="bname" required><label for="bname">Benutzername</label>
<input id="passwd" type="password" required><label for="passwd">Passwort</label>
<button type="submit">anmelden</button>
</form>
::before-Pseudoelemente der label-Elemente, die ::after-Pseudoelemente stellen wie in den anderen Beispielen dieser Seite auch bereits die abschließenden Doppelpunkte dar.
Die Reihenfolge im Markup ist ungewöhnlich, aber notwendig:
-
inputdarf als replaced element keinen, auch keinen generierten Inhalt erhalten, - CSS kann nur vorwärts selektieren
Quellen
- ↑ SELF-Forum: CSS größer und kleiner Selektor bei Attributen von Gunnar Bittersmann von 25.09.2020
maxlength mit dem Teilübereinstimmungs-Selektor auslesen und input-Feld entsprechend stylen
Siehe auch
