Überprüfung von Zahleneingaben

Postleitzahlen, Kreditkartennummern und IBAN

Geschrieben von am .

Verwendung von Attributen ohne Nutzung von JavaScript

HTML5 stellt Attribute für Eingabefelder bereit, die in vielen Fällen den Einsatz von JavaScript überflüssig machen.

  1. Mit size="16" kann man die Größe des Eingabefeldes und mit maxlength="15" die maximale Länge der Eingabe vorgeben. Damit wird nur das abgeschickt, was sichtbar ist, und nicht auch Inhalte, die durch seitliches Scrollen verborgen sind. Sie können in das Feld nicht mehr schreiben als erlaubt ist:

    Ohne diese Parameter kann ein Feld beliebigen langen Text enthalten, von dem nur ein kleiner Teil oder auch gar nichts sichtbar ist. Klicken Sie ins Feld und scrollen Sie mit ◀ und ▶ seitlich:

  2. Mit placeholder="...text..." angegebener Platzhaltertext wird im Formularfeld angezeigt, solange noch nichts eingegeben wurde.

    So sorgt man mit wenig Aufwand und ohne JavaScript für Klarheit und vermeidet Fehler.

  3. Mit required werden Pflichtfelder markiert. Hat ein so markiertes Formular-Feld keinen Inhalt, kann das Formular nicht abgeschickt werden. Stattdessen wird etwas in der Art Bitte füllen Sie dieses Feld aus angezeigt:

Hinweis: Bei einem erfolgreichen Abschicken passiert nichts. Denn das mit action= angegebene Ziel des Formulars liefert einen 204 No Content-Status ohne Dateninhalt. Dadurch bleibt der Browser auf dieser Seite. Nichts passiert steht also für Erfolg.

  1. Der Browser setzt das Bitte füllen Sie dieses Feld aus unter das betroffene Feld und erspart Ihnen so die Suche. Klicken Sie einfach auf das abschicken, und der Browser zeight Ihnen die Pflichtfelder. Völlig ohne JavaScript:


  2. Der Browser kann auch den Inhalt von Feldern überprüfen. Dazu gibt man im Attribut pattern die erlaubten Inhalte in Form eines regulären Ausdrucks an.

    Der reguläre Ausdruck für eine deutsche Postleitzahl, also fünf Ziffern, lautet \d{5}. Dabei bedeutet \d Ziffer und {5} das vorausgehende Konstrukt 5 mal wiederholt. Wenn das Formular-Feld mehr oder weniger als fünf Zeichen oder ungültige Zeichen enthält, lässt sich das Formular nicht abschicken. Stattdessen zeigt der Browser den Hinweise Bitte halten Sie sich an das vorgebenene Format.

    Mit einer Style-Regel sorgen wir dafür, dass Felder mit einem Inhalt, der nicht zum Pattern passt, mit einem roten Rand markiert werden:

    input[placeholder]:invalid:not(:placeholder-shown) {
    border: 3px solid red;
}

  3. Der Hinweis Bitte halten Sie sich an das vorgebenene Format erklärt nicht, was das vorgegebene Format ist. Diese Angabe Deutsche Postleitzahl aus 5 Ziffern kommt ins title-Attribut. Ein Feld mit ungültigem Inhalt wird vom Browser jetzt mit Bitte halten Sie sich an das vorgebenene Format: Deutsche Postleitzahl aus 5 Ziffern. kommentiert. Damit kann der Nutzer etwas anfangen.

    Bei der Formulierung des Hinweis sollte man beachten, dass der Inhalt des title-Attributes auch beim Mouse-over des Eingabefeldes angezeigt wird.

Wichtig zu wissen: der Benutzer kann auch bei einem gegebenen pattern=-Attribut beliebigen Text eingeben, in das Postleitzahlenfeld z.B. auch Buchstaben. Der Browser greift erst ein beim Versuch, das Formular abzuschicken.

Korrektur von Eingaben

Zur Korrektur von Eingaben brauchen wir JavaScript: Eingaben triggern Event-Handler, und die korrigieren den Inhalt des Eingabefeldes und setzen den Eingabe-Cursor (Caret) an eine passende Position:

  1. Postleitzahlen: maximal 5 Zeichen, alles außer Ziffern wird getilgt:

  2. Von 8 bis 16 Ziffern und Buchstaben A bis Z, Kleinbuchstaben werden nach Großbuchstaben konvertiert:

  3. Ein Trennstrich am Ende wird erst beim Verlassen des Feldes (blur-Event) getilgt:

Die Prüfung vor dem Abschicken wird weiterhin vom pattern=-Attribut übernommen. Das ist aber nur für einfache Muster möglich; ein regulärer Ausdruck, der die Prüfsumme einer IBAN oder einer Kreditkartennummer nachrechnet, wäre unbrauchbar groß.

Felder mit Prüfsummen

Bei Feldern mit Prüfsumme wird eine Validierungs-Funktion aufgerufen, die entscheidet, ob eine Eingabe zulässig ist. Leider kann man das Ergebnis dem Browser nicht direkt mitteilen. Stattdessen wird, wenn das Formular-Feld einen unzulässigen Inhalt hat, dass pattern-Attribut auf den leeren String gesetzt. Dann passt der Inhalt nicht auf das Pattern, der Browser markiert das Feld, und man kann das Formular nicht abschicken.

Im Text des title-Attributs sollte man auf die zusätzliche Bedingung gültig hinweisen, also nicht einfach Kartennummer aus 16 Ziffern, sondern gültige Kartennummer aus 16 Ziffern.

  1. Kartennummer (Kreditkarte, Bahncard, …):

    Die Eingabe besteht aus 16 Ziffern, das Skript fügt aber Leerzeichen zur Gliederung ein.

    Valid:      4683457829376522
Invalid:    4683457829376521
Incomplete: 468345782937652
  2. Internationale Bankkontonummer (IBAN):

    Eine IBAN besteht aus:

    1. Ländercode (2 Großbuchstaben),
    2. Prüfsumme (2 Ziffern), und
    3. nationale Kontoidentifikation (bis zu 30 Ziffern und Großbuchstaben).

    Eine deutsche IBAN besteht aus DE und exakt 20 Ziffern.

    Valid:      DE29100100100987654321
Invalid:    DE29100100100987654320
Incomplete: DE2910010010098765432

Zum Selbermachen

Sie können das Skript number-input.js und das Style-Sheet number-input.css herunterladen. Es gibt eine Seite mit vereinfachtem HTML number-input.htm, eine Seite mit integriertem Skript und Style number-input-standalone.htm sowie das Rundum-Sorglos-Paket number-input.zip.