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 >
[Code herunterladen]

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 >
[Code herunterladen]

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 >
[Code herunterladen]

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">
[Code herunterladen]

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

Hier ein Beispiel:

  1. <input type="email">
[Code herunterladen]

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

Hier ein Beispiel:

  1. <input type="number">
[Code herunterladen]

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>
[Code herunterladen]

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]">
[Code herunterladen]

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">
[Code herunterladen]

Attach::max--.png Δ

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

  1. <input name="min" type="number" min="94">
[Code herunterladen]

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!" />
[Code herunterladen]

Weiterführende Links

0 Kommentare (zeigen/schreiben)

Letzte Änderung am 27.10.2011 12:14 Uhr von aklassen.

Hilfe?!

Hier finden Sie Entwickler-Dokumentation für Stud.IP.

Hilfe zur Bedienung und Administration von Stud.IP finden Sie im Dokumentations-Portal.

Entwickler-Doku

Spielregeln

Weitere Themen

Plugins

Spezielle Klassen

(c) Stud.IP e.V. und die Autoren der Stud.IP-Dokumentation.
Dieser Text ist unter der Lizenz "Creative commons Attribution/Share Alike" verfügbar.