Barrierefreie clientseitige Validierung
Seit Stud.IP 2.1 ist es möglich Formularelemente barrierefrei clientseitig zu validieren. Der Entwickler muss lediglich, die in der vom W3C vorgestellten HTML5 Spezifikation bezüglich der <form>
und <input>
Elemente verwenden. Im folgenden Text der Dokumentation werden die einzelnen Gestaltungsmöglichkeiten aufgezeigt und im Detail anhand von Codebeispielen erläutert.
Markieren von benötigten Feldern
Um ein Eingabefeld als notwendig zu markieren muss lediglich das in HTML5 vorgestellte Attribut required
gesetzt werden. Hier ein Codebeispiel:
<input class="user_form" type="text" name="username" value="<?= $username] ?>" required >
Mittels Javascript wird beim Laden der Seite entsprechende ARIA-Attribute gesetzt. Die folgenden Codebeispiele zeigen den entsprechenden generierten HTML-Code.
<input class="user_form" type="text" name="username" value="" aria-required="true" required >
Sofern die Nutzereingabe nicht validiert werden kann, erzeugt dies im Browser folgendes Verhalten:
<input class="user_form invalid" type="text" name="username" value="" aria-required="true" aria-invalid="true" required >
Verwendung der einzelnen Eingabetypen
Im Folgenden werde anhand von Beispielen die verschiedenen Eingabetypen vorgestellt. Jede Nutzereingabe kann somit individuell in Bezug auf die vorgestellten Eingabetypen validiert werden.
URLs:
Der Inputtype url
prüft die Nutzereingabe auf gültige URLs.
Hier ein Beispiel:
E-Mail-Adressen:
Der Inputtype email
prüft die Nutzereingabe auf gültige E-Mail-Adressen.
Hier ein Beispiel:
Nummerische Eingaben:
Der Inputtype number
prüft die Nutzereingabe auf gültige Float und Integer Zahlen.
Hier ein Beispiel:
Verwendung einzelner Attribute für Eingabefelder
required
:
Durch setzen des Attributes required
können Eingaben in ein bestimmtes Inputfeld sichergestellt werden.
Hier ein Beispiel:
<input type="text" required>
pattern
:
Das Attribut pattern
ermöglicht es die Nutzereingabe auf einen beliebigen regulären Ausdruck zu prüfen.
Hier ein Beispiel:
<input name="numBetween0and9" type="text" pattern="[0-9]">
Attribute für den Eingabetyp number
max
:
Der maximale Wert der Nutzereingabe kann durch setzen des Attribut max
bestimmt werden.
Hier ein Beispiel:
<input name=
"max" type=
"number" max=
"4">
Attach::max--.png Δ
min
:
Analog kann auch der Mindestwert der Eingabe mittels min
bestimmt werden.
<input name=
"min" type=
"number" min=
"94">
Attach::min--.png Δ
Anpassen des Feedbacks
Durch setzen des Attributes data-message
ist es möglich das Feedback anzupassen.
Hier ein Beispiel:
<input name=
"A number between 0 and 9" type=
"number" max=
"1" data-message=
"A number between 0 and 9 is needed!" />
Weiterführende Links