Postleitzahl im HTML-Input validieren

[lui3000]

Hallo Forum,
ich bin ganz neu im Thema HTML, JavaScript und Node.js.
Ich habe mir ein HTML-Formular gebastelt, über das mein Server eine Postleitzahl entgegennehmen soll.
Also geht es um eine exakt fünfstellige Zahl.
Die Eingabe soll zudem ein Pflichtfeld sein.
Hier mein bisheriger Code:

<input name="postleitzahl">

Danke
lui3000

 

[anne74]

Hallo lui3000!
Node.js ist super!
Du hast zwei Möglichkeiten das zu programmieren.
Es geht damit los, dass Du Deinem INPUT einen Typ gibst:
Also entweder:

<input name="postleitzahl" type="number">

Oder:

<input name="postleitzahl" type="text">

Danach kannst Du die Eingaben noch weiter einschränken. Also in Bezug auf die Länge usw.
Gruß
Anne74

 

[lui3000]

Hallo Anne74,
Danke! Da hätte ich natürlich auch selbst darauf kommen können!
Nach ein paar Experimenten stelle ich fest, dass

<input type="text">

die bessere Wahl ist, auch wenn es sich ja dem Namen nach bei der Postleitzahl um eine 'number' handelt. Der Grund ist, dass z. B. die Postleitzahlen von Berlin mit 0 anfangen. Die führende 0 würde bei

<input type="number">

einfach abgeschnitten. Das darf natürlich nicht passieren.
So sieht jetzt meine Lösung aus, mit der ich eine 5stellige Eingabe erzwinge und zusätzlich ein Pflichtfeld ("require") definiere:

<input type="text" minlength="5" maxlength="5" require>

Eine entscheidende Kleinigkeit fehlt aber noch: Wie verhindere ich die Eingabe von 5 Buchstaben statt Zahlen? Oder geht das nur mit type="number"?

lui3000

 

[anne74]

Hallo lui3000,
beim type="text" kannst ebenfalls erzwingen, dass nur Ziffern eingegeben werden dürfen. Das Zauberwort heißt pattern. Hier das exakte pattern, mit dem Du die Eingabe der Ziffern 0, 1, 2, 3, 4, 5, 6, 7, 8 oder 9 [0-9] erzwingst und zusätzlich die Anzahl der Stellen auf genau fünf {5} festlegst:

pattern="[0-9]{5}"

Auf minlength und maxlength und auch auf required kannst Du sogar verzichten, wenn Du das pattern genauso in dein Input einbaust.
Wenn Du willst, kannst Du zusätzlich eine Meldung an den Benutzer ausgeben, wenn er etwas falsch eintippt:

title="Bitte exakt 5 Ziffern eingeben!"

Gruß
Anne74

 

[lui3000]

Hallo Anne74
Danke :-)
lui3000

 

[_killy_]

Bitte beachten - du validierst damit ausschließlich PLZ für Deutschland ... in anderen Ländern ist der Aufbau der PLZ anders.

 

[deveth0]

@anne74 schön erklärt!
Eine kleine Idee habe ich noch: wenn du in dem input noch folgendes setzt, dann bekommst du auf Smartphones etc auch direkt die Zahlentastatur angezeigt:

<input inputmode="numeric"...>

 

[Dokram]

Hmm...ihr (@lui3000/@anne74) meldet euch fast zeitgleich im Forum an, schreibt abwechselnd im Minutentakt eure Beiträge mit Code usw.

Liest sich merkwürdig, würde (fast) annehmen, dass ihr trollt oder künstlich Beiträge generiert.

 

[Mihawk90]

Bitte beachtet aber, dass die client seitige Erzwingung eines Patterns keine Validierung darstellt, sondern nur die Eingabe für Deppen erleichtert!

Eine Validierung findet immer serverseitig statt, denn es könnte auch jemand einfach Daten per POST übergeben und den interessiert die Definition im HTML Element herzlich wenig. In den Devtools kann das Pattern auch einfach entfernt werden.

 

[sikarr]

Wie verhindere ich die Eingabe von 5 Buchstaben statt Zahlen?

Nur der Vollständigkeit halber. Ist das Zauberwort nicht pattern sondern RegEx (Regular Expression), der pattern ist dann der regulare Ausdruck.

 

[ayngush]

Bitte beachtet aber, dass die client seitige Erzwingung eines Patterns keine Validierung darstellt, sondern nur die Eingabe für Deppen erleichtert!

Das stimmt weitestgehend aber leider nicht gänzlich.
Eine clientseitige Validierung der Eingaben im Browser ist per Definition auch eine Form der Datenvalidierung.

Das darf jedoch nicht alleine genügen (never trust the User; always check the Userinput) und serverseitig müssen die Eingaben zwingend sauber validiert werden. Clientseitig ist es höchst sinnvoll sie zu validieren. Serverseitig ein Muss.

Aber die Definition von Validierung ist die Prüfung auf Plausibilität. Das ist genau das, was man macht, wenn man ein Datentyp und Datenformat vorgibt und Falscheingaben mit einer Meldung abweist ohne den Programmablauf weiter auszuführen.