Formulare validieren mit HTML 5

Die Validierung von Formularelementen ist in HTML 5 Formularen bereits integriert. Es gibt unterschiedliche Feldtypen (für z.B. email und url) und Attribute, die die Eingabe von Werten in Formularfeldern einschränken.
Es wäre ein Segen für jeden Webentwickler, wenn ja wenn jeder Browser diese HTML 5 Funktionalität bereits jetzt unterstützen würde. Besonders das Sorgenkind Internet Explorer patzt an dieser Stelle, aber auch mein Lieblingsbrowser Opera muss momentan dazu noch überredet werden.

Fehlende HTML 5 Funktionalitäten werden momentan mit Javascript nachgerüstet (s.a. modernizr). So ist es auch beim jquery Plugin html5form, dass bei der Formularvalidierung nachhilft.

Die Einbindung ist so einfach, dass es auch mit einer Zeile Code möglich wäre. An dieser Stelle aber schon ein erweitertes Beispiel, das zusätzlich die Fehlerausgabe in Deutsch und in einem eigenen Bereich aktiviert:

<script src="js/jquery-1.4.2.min.js">
<script src="js/jquery.html5form-min.js">

   $('#userForm').html5form({
      messages : 'de', // Options 'en', 'es', 'it', 'de'
      responseDiv : '#response'
      colorOn:'#6b6764',
      colorOff:'#0d85a5'
   })

Verwendet man in einem Formularelement dann z.B. das Attribut required und es erfolgt keine Eintrag in dieses Feld, dann sieht die Fehlermeldung so aus

Getestet wurde html5form für die Browser:

  • Internet Explorer:
    IE6 – IE7 – IE8 – IE9 beta
  • Mozilla Firefox:
    3.0 – 3.5 – 3.6 – 4.0 beta6
  • Google Chrome:
    4.0 – 5.0 – 6.0
  • Apple Safari:
    4.0 – 5.0
  • Opera:
    10

Bei den WebKit basierten Browsern Chrome und Safari, die die Formular Validierung in HTML 5 bereits unterstützen, wird dieses Plugin nicht aktiviert. Zu Testzwecken kann man aber auch das erzwingen.

via:
HTML5 Validierung mit jQuery

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit deinem WordPress.com-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s

%d Bloggern gefällt das: