Formularfelder in Stud.IP

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:

  1. <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.

  1. <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:

  1. <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:

  1. <input type="url">

E-Mail-Adressen:
Der Inputtype email prüft die Nutzereingabe auf gültige E-Mail-Adressen.

Hier ein Beispiel:

  1. <input type="email">

Nummerische Eingaben:
Der Inputtype number prüft die Nutzereingabe auf gültige Float und Integer Zahlen.

Hier ein Beispiel:

  1. <input type="number">

Verwendung einzelner Attribute für Eingabefelder

required:
Durch setzen des Attributes required können Eingaben in ein bestimmtes Inputfeld sichergestellt werden.

Hier ein Beispiel:

  1. <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:

  1. <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:

  1. <input name="max" type="number" max="4">

Attach::max--.png Δ

min:
Analog kann auch der Mindestwert der Eingabe mittels min bestimmt werden.

  1. <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:

  1. <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

Letzte Änderung am October 27, 2011, at 12:14 PM von aklassen.