Eingabefelder mit HTML 5 überprüfen

Mit HTML 5 und dem Attribut pattern="" (Mustererkennung) kann man Eingabefelder im Formular überprüfen bevor dieses abgesendet wird.

Beispiel:
Angabe: Zahlen: <input type="number" name="zahlen" pattern="[0-9]">
Info: Es werden nur Zahlenwerte angenommen.

Fehlerhafte Eingaben hervorheben

Eingabefehler werden bei einer fehlerhaften Eingabe rot markiert, mit CSS kann das angepasst werden:

<style>
input:invalid {
  color: #EE0000;
}
</style>

Minimal.- und Maximalangaben setzen

Für das Eingabefeld vom Typ: "number", können die Attribute: min="" und max="" verwendet werden. Beim Attribut min="" geben Sie den minimalen Wert ein und bei max="" den maximalen Wert.

Beispiel:
Angabe: Zahlen: <input type="number" name="zahlen" min="10" max="100">
Info: Es werden nur Zahlenwerte von 10 bis 100 angenommen.

Auf Kleinbuchstaben überprüfen

Beispiel:
Angabe: Buchstaben: <input type="text" name="buchstaben" pattern="[a-z]">
Info: Es werden nur Kleinbuchstaben angenommen (ohne Umlaute und Sonderzeichen).


Viele weitere Beispiele finden Sie auf: http://html5pattern.com/