Zum Inhalt springen

Validierung von Formularen mit HTML5

  • von

Mit HTML5 ist es möglich dem Nutzer erkenntlich zu machen, welche Felder Pflichtfelder sind, bzw. ob das Feld richtig ausgefüllt wurde. Dies wird allerdings noch  nicht von allen Browsern unterstützt. Um sicher zu gehen, dass Sie aus dem Formular die richtigen Daten erhalten und alle Pflichtfelder gefüllt sind, sollten die Angaben weiterhin serverseitig mit beispielsweise PHP überprüft werden.

Um ein Formularfeld mittels HTML5 als Pflichtfeld zu deklarieren muss dem Input-Tag nur ein „required„-Attribut hinzugefügt werden. Dies könnte beispielsweise so aussehen:

<input type=“text“ name=“Vorname“ required=“required“ />
name
Und sobald das Feld ausgefüllt wurde:
Name_richtig

Die Formatierungen der Input-Felder, wie z.B. die Daumen, die in den Bildern zu sehen sind, können per CSS angepasst bzw. eingebaut werden:

input:required:invalid, input:focus:invalid {
background-image: url(/images/invalid.png);
background-position: right top;
background-repeat: no-repeat;
}
input:required:valid {
background-image: url(/images/valid.png);
background-position: right top;
background-repeat: no-repeat;
}

Auch, wenn die Formularfelder nur mit bestimmten Inhalten gefüllt werden sollen, kann dies mit HTML5 realisiert werden. Dazu muss das „pattern„-Attribut in den Input-Tag eingefügt werden:

<input type="url" name="website" required="required" pattern="https?://.+" />

In diesem Beispiel wird geprüft, ob das Feld mit „http://“ bzw. mit „https://“ beginnt.

Das „pattern„-Attribut erhält als Wert einen regulären Ausdruck. Die Eingabe des Benutzers muss, damit das Formular abgesendet werden kann, diesem Ausdruck entsprechen.