Formular-Eingabevalidierung im Online-Übungssystem

Autor: Immo Schulz-Gerlach
Version: 1.2 – 16. Dezember 2015
[PDF-Version] [ePub-Version]

Formular-Eingabevalidierung

Das Online-Übungssystem bietet ab sofort die Möglichkeit, Formulare mit einer automatischen Prüfung der Eingaben auszustatten, sofern der Benutzer in seinem Browser JavaScript nicht abgeschaltet hat. Dazu kann für einzelne Formularfelder festgelegt werden, ob sie z.B. Pflichtfelder sein sollen (d.h. nicht leer gelassen werden dürfen), ob sie nur Ziffern oder Zahlen (mit Fließkommadarstellung) oder ein Datum aufnehmen dürfen. So lange diese Bedingungen nicht sämtlich erfüllt sind, lässt sich das Formular nicht absenden.

Beispiel für Texteingabe in ein Zahlen-Feld
Beispiel für Texteingabe in ein Zahlen-Feld

Obige Abbildung zeigt beispielhaft eine Fehlermeldung für ein als numerisch markiertes Feld. Derartige Prüfungen vor dem Einsenden können (insbesondere bei automatisch nach Einsendeschluss bewerteten Aufgaben) Studierenden helfen, fehlerhafte Eingaben schon vor dem Einsenden (und nicht erst nach Erhalt der Korrektur) zu erkennen.

Einrichtung

Um für ein HTML-Formular die Eingabevalidierung zu aktivieren, fügen Sie dem Form-Tag die Klasse validated hinzu (<form … class="validated" …>…</form>). Weiterhin sind zu jedem Formularelement, für das eine Validierung stattfinden soll, die jeweiligen Validierungsregeln ebenfalls als Klasse (d.h. im class-Attribut) anzugeben. Insb. folgende Klassen sind möglich:

Klasse zulässige Eingaben
required Pflichtfeld: Das Feld darf nicht leer gelassen werden.
Die Klasse required lässt sich mit den folgenden Klassen kombinieren:
digits Eine Ziffernfolge (ohne weitere Zeichen wie Plus, Minus, Komma oder Punkt)
number Eine Zahl, die wahlweise mit Minus beginnen darf und entweder einen Punkt oder ein Komma als Dezimaltrenner (jedoch keinen Tausendertrenner) aufweisen darf.
Beispiele für korrekte Zahlen: „5“, „5,9“ oder „-456.99“
dateDE Datum im Format tt.mm.jjjj (also zweistelliger Tag, zweistelliger Monat, vierstelliges Jahr)
dateISO Datum im Format jjjj/(m)m/(t)t (vierstelliges Jahr, ein- oder zweistelliger Monat, ein- oder zweistelliger Tag, alternativ zu ‚/‘ ist auch ‚-‘ als Trennzeichen erlaubt)
url Absolute URL (muss mit http://, https:// oder ftp:// beginnen, andere URLs werden nicht erkannt)
email E-Mail-Adresse

Beispiel für ein validiertes Formular mit einem Pflichtfeld zur Eingabe einer Zahl:

<form class="validated" action="$WebAssignServer/$Veranstaltername/Einsendung/$KursNr/$VersionsNr/$AufgabenheftNr/$AufgabenNr" method="post">
…
<input type="text" class="number required" name="FeldA1" value="$FeldA1" />
…
</form>

Hinweise