Polyfills zur Formularüberprüfung

Wie in den vorhergehenden Kapiteln bereits öfters erwähnt, unterstützen nicht alle Browser die neuen und interessanten Features der Formularüberprüfung mit HTML5. Dafür gibt es dann Polyfills, die die Benutzerfreundlichkeit der Webseite aufrecht erhalten.

h5validate von Eric Leads

Eric Leads hat ein sehr gut nutzbares polyfill entwickelt, dass das required Attribut und das pattern Attribut so unterstützt, dass es von den Desktop Browsern: IE9, 8, 7, 6, Chrome, Firefox, Safari und Opera, sowie den mobilen Browsern: iPhone, Android und Palm WebOS genutzt werden kann.

Schritt für Schritt Anleitung

• Zuerst muss man das polyfill herunterladen
• Dann muss man die JavaScript Datei, jquery.h5validate.js, auf seinen Webserver hochladen
• Dann muss man den folgenden Code kopieren und am Ende jedes Body auf jeder Seite die HTML5 nutzt, eintragen. Man sollte sich vergewissern, dass der Pfad zur jquery.h5validate.js korrekt ist, da man ja in seiner Ordnerstruktur durchaus auch einen Unterordner nutzen kann.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.h5validate.js"></script>

<script>
$(document).ready(function () {
    $('form').h5Validate();
});
</script>

In der ersten Codezeile wird die JavaScript Bibliothek jQuery aufgerufen und in der zweiten Zeile das Polyfill h5validate geladen. Nun da die benötigten Ressourcen geladen sind wird mit dem letzten Script eine Verbindung zwischen Code und dem Formular hergestellt.

Wenn man nur das required Attribut auf einem der o.g. Browser nutzt, wird es auch funktionieren. Zusätzlich dazu wird auch das pattern Attribut nun unterstützt. Aber man muss bedenken, wenn man das pattern Attribut nutzt, muss man auch ein entsprechendes Muster erstellen. Man kann das pattern Attribut unter anderem dazu benutzen eMail Adressen oder ein Datum zu überprüfen.

html5widgets von Zoltan Hawryluk

Zoltan Hawryluk hat ein sehr umfassendes polyfill geschaffen, das fast alle HTML5 Formular Probleme löst. Es benutzt Modernizr um den nativen Support für HTML5 Elemente des genutzten Browsers zu ermitteln und wenn es keine gibt, greift das html5widget.

Das html5widget polyfill ist sehr umfassen und Zoltan hat eine gute Schritt für Schritt Anleitung erstellt wie man es installiert und benutzt. Daher hier eine kurze Auflistung was das html5widget alles kann:

• Formularüberprüfung mit dem required und dem pattern Attribut
• Das autofocus Attribut
• Das Platzhalter Attribut
• Den range input type und das output Tag
• input Typen wie datetime, datetime-local, date, week
• Den color input Typen