Wie viele bereits wissen, werden mit HTML5 eine Menge neuer Typ-Attribute für Formular-Elemente eingeführt, ausserdem - unter anderem - auch die Attribute required, placeholder und pattern. Das eingebundene jQuery-Script nutzt diese neuen Attribute zur Validierung und ist somit eher zukunftsorientiert. Auch wenn die meisten Browser bereits viele der neuen HTML5-Attribute kennen, sollte das Script als experimentell angesehen werden, da sich die Gegebenheiten jederzeit noch ändern können.
Zunächst einmal weist das Script jedem Eingabe-Element (input, textarea) die Attribute placeholder und pattern mit im Script definierten Werten zu, falls diese nicht bereits im HTML selbst festgelegt wurden.
Als nächstes werden alle Eingabefelder, die eine Datumsangabe erfordern (date, datetime, datetime-local, month, week), mit dem UI Datepicker Widget ausgestattet. Das setzt natürlich voraus, das jQuery UI eingebunden wurde. Opera wird davon ausgeschlossen, da dieser einen eigenen Datepicker besitzt.
Warum überhaupt einen Datepicker? Nun, die Datumseingabe-Möglichkeiten und deren Aussehen sind in den verschiedenen Browsern unterschiedlich und meiner Meinung nach für einen Benutzer eher gewöhnungsbedürftig bzw. unverständlich. Ein Deutscher ist es z.B. gewohnt, ein Datum in der Form 24.12.2011 zu schreiben. Diese Schreibweise ist aber in den neuen Browser-Versionen gar nicht möglich bzw. wird nicht akzeptiert. Durch den Einsatz eines Datepickers kann ein einheitliches Ausgabeformat gewährleistet werden und der Benutzer muss sich nicht den Kopf zerbrechen, wie nun die Eingabe auszusehen hat.
Alternativ dazu kann man Felder mit Datumsangabe (date, datetime, datetime-local, month, week) sowie Felder vom Typ time und color durch normale input-Felder vom Typ text ersetzen und dort das Universal-Attribut alt mit dem eigentlich gewünschtem Typ versehen. Das Script reagiert darauf und behandelt diese Felder so, als wären sie von dem im alt-Attribut definiertem Typ. Das hat den grossen Vorteil, das die Felder in allen Browsern gleich ausschauen und erst gar nicht beim User zu Verwirrungen führen können.
Der nächste Schritt im Script-Ablauf ist es, den Rahmen benötigter Felder (required) farblich zu markieren und einen entsprechenden Hinweis im Feld-Label zu platzieren. Es wird also davon ausgegangen, das jedes input-Feld mit einem entsprechenden label kommuniziert und der HTML-Aufbau so ausschaut!
<label for="REQ_email_field_2" title="email">Type email </label>
<input id="REQ_email_field_2" title="email" name="REQ_email_field_2" value="" type="email" required="required" />
Achtung: Bei den Feld-Typen checkbox und radio muss man je nach HTML-Struktur die entsprechenden Zeilen in
jQuery.each( cr_obj, function(i, val){ ... } )
anpassen! Die hier genutzte Struktur schaut so aus:
<div class="item">
<label title="radio">Type radio <span style="color: #ff0000;">*</span>
<!-- An dieser Stelle erscheint der Hinweistext bei diesem HTML-Konstrukt -->
</label>
<span class="check">
<input title="label 1" class="check" required="required" id="REQ_radio_field_15_1" name="REQ_radio_field_15" value="value 1" type="radio" />
<label class="check" for="REQ_radio_field_15_1" title="label 1">label 1</label>
</span>
<span class="check">
<input title="label 2" class="check" required="required" id="REQ_radio_field_15_2" name="REQ_radio_field_15" value="value 2" type="radio" />
<label class="check" for="REQ_radio_field_15_2" title="label 2">label 2</label>
</span>
</div>
Die Zeile im jQuery Code:
var hint_radio = $(':radio[name="'+val+'"]').eq(0).parent().prev("label");
Die Validierung erfolgt so zu sagen live. Per setInterval() wird immer wieder in einem konfigurierbarem Zeitabstand eine Funktionsroutine aufgerufen, welche die Eingaben des Benutzers anhand des Attributs pattern überprüft. Dabei werden auch die Felder überwacht, welche nicht als required definiert wurden. Sobald der Benutzer eine Eingabe beginnt, ändert sich der Hinweis-Text und beschreibt detailierter, wie die Eingabe ausschauen muss. Sobald die Eingabe den Anforderungen entspricht, ändert sich der Text des Hinweises erneut.
Solange der Benutzer nicht alle benötigten Felder gemäss den pattern-Regeln ausgefüllt hat, ist das Abschicken des Formulars nicht möglich. Ist das Formular richtig ausgefüllt worden, wird der Benutzer nach dem Anklicken des Submit-Buttons dazu aufgefordert, in einem Dialogfenster eine bestimmte Zeichenfolge einzugeben. Wird die Zeichenfolge richtig eingeben, wird das Formular abgeschickt, ansonsten poppt das Dialogfenster erneut auf.
Einige Leute werden sich nun fragen, warum ich den Dialog mit der altmodisch wirkenden Methode prompt() realisiert habe. Die Antwort ist einfach: Dadurch entsteht kein HTML-Code, der einfach ausgelesen werden kann.
Das Script wurde mit folgenden Browsern getestet:
Demo und Script kann man sich hier downloaden: demo.rar
Damit man beim Testen nicht immer das gesamte Formular ausfüllen muss, kann man hier ein wenig selektieren.
alle input Felder löschen date, datetime, datetime-local, month, week löschen file löschen textarea löschen checkbox und radio löschen checkbox löschen radio löschen select löschen nur text, email, tel, date, textarea, checkbox, select