Formulardaten mit JavaScript validieren

Wenn Ihr Website mehr als nur eine Visitenkarte ist, werden Sie sicherlich Formulare für eine Anmeldung, eine Bestellung oder auch nur ein Newsletter-Abonnement verwenden. Die von Besuchern, Mitgliedern oder Kunden in diesen Formularen angegebenen Daten sollten auf einer professionellen Website vor Absenden des Formulars mit JavaScript validiert werden.

Warum validieren?

Validieren bedeutet zunächst eine Prüfung, dass bei allen Pflichtfeldern eines Formulars Angaben gemacht wurden. Ist dies der Fall, sollte eine logische Überprüfung der angegebenen Daten mit JavaScript erfolgen. So besteht z.B. eine deutsche Postleitzahl ausschließlich aus Zahlen und eine E-Mail-Adresse besteht aus einer Zeichenkette, gefolgt von einem @-Zeichen, einer weiteren Zeichenkette, einem Punkt und schließlich einer weiteren Zeichenkette, die die Endung der Domain repräsentiert. Ein Passwort mit nur 3 Buchstaben ist nicht sicher genug, Pseudonyme sollten nur aus alphanumerischen Zeichen bestehen u.v.m.

Im Download-Center finden Sie einen einfachen JavaScript-Codeschnipsel zum Validieren einer E-Mail-Adresse.

Die Validierung von Formulardaten vor bzw. beim Absenden des Formulars mit JavaScript auf der Client-Seite spart wertvolle Server-Ressourcen und vereinfacht den Anmelde-, Bestell- oder Kontaktaufnahme-Vorgang für den Anwender. Er muss nicht erst warten, bis die Seite neu geladen wird und eine Fehlermeldung ausgibt, dabei im schlimmsten Fall auch noch seine bereits korrekt angegebenen Daten „verschwunden” sind. Stattdessen springt der Fokus auf das fehlerhaft ausgefüllte Formularfeld und der Nutzer kann seine ungültige Eingabe sofort korrigieren.

Validierung via HTML5

HTML5 macht die Validierung einfach, solange keine hohen Ansprüche an Text und Layout bestehen.

Die zahlreichen neuen Attribute und Attributswerte für Eingabefelder machen die Validierung vom Benutzer eingegebener Daten denkbar einfach. Fehlermeldungen erscheinen automatisch in der im Webbrowser eingestellten Sprache. Vorbei sind die Zeiten, in denen Übersetzungen für alle unterstützen Sprachen der Website oder des Onlineshops zu hinterlegen waren. Es gibt jedoch 2 Beispiele, die schnell die Grenzen der schönen neuen Validierungswelt verdeutlichen.

Die optische Gestaltung und der angezeigte Text obliegen dem Browserhersteller. Beides entspricht nicht zwangsläufig dem Erscheinungsbild oder dem Schreibstil Ihrer Website. Als konkretes Beispiel sei nur die Divergenz zwischen der Höflichkeitsform und der Anrede via Du genannt. Dem erfahrenen Entwickler ist durchaus bewusst, dass sowohl die Meldung als auch deren Layout via JavaScript beeinflussbar sind. Damit wären wir allerdings wieder beim ursprünglichen Thema.

Insbesondere mit dem pattern-Attribut steht ein mächtiges Werkzeug zur Verfügung. Doch auch dieses versagt, wenn mehrstufige Logik gefragt ist. Beispiel: Ist der eingegebene Benutzername noch verfügbar oder schon vergeben? Ist als Land Deutschland ausgewählt, muss der Nutzer eine 5stellige Postleitzahl eingeben. Kommt er aus Österreich oder der Schweiz, sind es nur 4 Ziffern.

Wie diese beiden Beispiele verdeutlichen, ist der Einsatz von JavaScript zur Formulardaten-Validierung trotz HTML5 noch lange nicht gänzlich obsolet.

Ihr Programmierauftrag zur Formulardaten-Validierung

Sie verwenden auf Ihrer Website Formulare, bei denen keine Validierung gemachter Angaben mit JavaScript erfolgt? Dann wird es höchste Zeit, JavaScript-Funktionen zum Validieren einzubinden. Wenn Sie diese Programmierung einem Fachmann überlassen möchten, nutzen Sie bitte folgendes Formular, um mit uns Kontakt aufzunehmen. In der Regel nimmt die Programmierung solcher Funktionen nur wenige Minuten in Anspruch, weshalb Sie mit keinen horrenden Kosten rechnen müssen.

Mit Absenden des Formulars erklären Sie sich mit der Speicherung und Verarbeitung der personenbezogenen Daten zum Zwecke der Bearbeitung Ihres Anliegens einverstanden. Weitere Informationen finden Sie in der Datenschutzerklärung.

* Pflichtfelder