Wie HTML5-Validierung funktioniert

Veröffentlicht von Tudor - 3. November 2016

Formulare zu validieren war bisher eine aufreibende und anstrengende Angelegenheit für Entwickler. Die Möglichkeit, reines HTML für die Formular-Validierung zu nutzen, war bis vor kurzem noch undenkbar. Sicher es gab alle möglichen Arten an Plug-Ins über die Jahre hinweg, mit deren Hilfe dass erreicht werden konnte, aber es gab nie einen einheitlichen Standard, auf den

wie_html5_funtkioniert

Required

Nutzt man das Required-Attribut wird der Nutzer vom Browser informiert, dass er dieses bestimmte Feld erst auszufüllen hat, bevor er das Formular übermitteln kann.  Das Required-Attribut berücksichtigt dabei nicht welche Art von Daten in das Eingabefeld eingetippt werden, aber folgende Input-Typen bieten dazu die Möglichkeit Indem man das „required“ -Attribut um <input>, <select> oder <textarea> erweitert, sagt man dem Browser, dass in diesem Feld ein Wert vorhanden sein muss. Das erinnert an die roten Makierungen(*), welchen wir in den meisten Registrierungsformularen begegnen.

Vorname: <input type="text" name="vorname" required>

Types

 Mit der Einführung von einigen neuen Input-Types  wie „email“, „url“, „datetime“, „tel“ usw. hat die HTML5 Spezifikation die Validierung einfacher gemacht. So besitzen diese Typen bereits vordefinierte Validierungsfunktionen. Immer wenn der eingegebene Wert nicht mit dem erwarteten Format übereinstimmt, werfen diese Types eine Fehlermeldung aus und verhindern das Abschicken des Formulars. Die neuen Input-Types sind wie folgt:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Patterns

Das Pattern-Attribut von HTML5 gestattet es uns, unsere eigene Regel zu definieren, um den Inhalt der Eingabefelder mithilfe von Regular Expressions (RegEx) zu definieren. Wenn der Wert nicht mit dem definierten Pattern übereinstimmt, wirft das Inputfeld einen Fehler. Beispiele: Großbuchstabe A Format: A

<input type="text" pattern="A">

Wortgruppe Hallo Welt Format: Xxxxx Xxxx

<input type="text" pattern="Hallo Welt">

Zahle 0815 Format: nnnn

<input type="text" pattern="0815">

Großbuchstabe Format: X

<input type="text" pattern="[ABCD]">

Buchstaben, keine Sonderzeichen Format: X oder x

<input type="text" pattern="[A-zÄÖÜäöüß]">

Eine Zahl Format: n

<input type="text" pattern="[0-247-9]">

Zeichen ausschliesen Format: $ oder X oder n

<input type="text" pattern="[^Ad5]">

5 Sonderzeichen Format: $$$$$

<input type="text" pattern="[^A-zÄÖÜäöüß0-9]{5}">

Hauptwort mit 5 Buchstaben Format: Xxxxx

<input type="text" pattern="[A-Z][a-z][a-z][a-z][a-z]">

Zahl mit 5 Stellen Format: nnnnn

<input type="text" pattern="[0-9][0-9][0-9][0-9][0-9]">

KFZ-Kennzeichen Format: XX-Xnnn

<input type="text" pattern="[A-Z][A-Z]-[A-Z][0-9][0-9][0-9]">

Postleitzahl Format: nnnnn

<input type="text" pattern="[0-9]{5}">

Deutsche IBAN Format: DEnnnnnnnnnnnnnnnnnnnn

<input type="text" pattern="DE[0-9]{20}">

  Pattern Quelle: http://pattern.tfcpc.de/pattern-tutorial.php

Downloads

Datei Beschreibung Dateigröße
psd test 0 B
zip sanfrancisco-child 613 kB
jpg zai26hwyrpy-giulia-bertelli 2 MB

Das könnte Dich auch interessieren

Kampf um die Werbung – von der anderen Seite betrachtet

Wer kennt es nicht: Bei dem täglichen Surfen auf seiner Lieblings-Internetseite muss man sich regelrecht durch einen Pop-Up-Dschungel klicken. Aber was ist wen...

RegEx from Hell

Reguläre Ausdrücke sind doof. Niemand mag reguläre Ausdrücke. Sie sind kompliziert und keiner versteht sie. Aber manchmal lassen sie sich leider nicht verme...

Pop-up mit JavaScript, CSS und Cookie

Wir haben ein tolles neues Produkt, eine super krasse Aktion oder ein fantastisches Event zu promoten? Da führt kein Weg an einem Pop-up vorbei. Das denken vie...