Formularvalidierung: Die Regeln, die Ihre Formulare wirklich brauchen

Formularvalidierung prüft, ob die Eingaben in ein Formular vollständig, im richtigen Format und plausibel sind, bevor sie gespeichert oder weiterverarbeitet werden. Gute Regeln haben drei Aufgaben. Sie sorgen für saubere Daten in Ihrem CRM, sie schützen Ihre Website vor Missbrauch und sie helfen Menschen, ein Formular ohne Frust abzuschicken. In diesem Leitfaden finden Sie die wichtigsten Regeln für Pflichtfelder, Formate, Längen und Wertebereiche. Außerdem geht es darum, wann Sie prüfen, wie gute Fehlermeldungen klingen und welche Fehler Sie Anfragen kosten.

Kurz gesagt

• Prüfen Sie immer doppelt: sofort im Browser für schnelles Feedback, zusätzlich auf dem Server für die Sicherheit. Prüfungen im Browser lassen sich umgehen.
• Regeln vorher nennen, nicht erst im Fehlerfall: Pflichtfelder und erwartete Formate gehören in das Label oder direkt darunter.
• Fehlermeldungen beschreiben das Problem und die Lösung, im Klartext und direkt am Feld, bei langen Formularen zusätzlich in einer Zusammenfassung oben.
• Weniger Regeln sind oft besser: Jede zu strenge Prüfung, etwa bei Namen oder Telefonnummern, kostet echte Anfragen.
• Eingaben bleiben erhalten: Nach einem Fehler muss niemand das ganze Formular neu ausfüllen.

Inhaltsverzeichnis

• Was Formularvalidierung leistet und warum sie sich lohnt
• Die Grundregeln im Überblick
• Im Browser und auf dem Server: Warum Sie beides brauchen
• Der richtige Zeitpunkt für die Prüfung
• Fehlermeldungen, die Menschen verstehen
• Barrierefreiheit: Validierung für alle Nutzer
• Häufige Fehler, die Anfragen kosten
• Checkliste: Ein Formular in acht Schritten sauber validieren
• Unsere Sicht: Validierung ist Vertrieb, nicht nur Technik
• Formulare, Kontakte und Automatisierung aus einer Hand
• Häufige Fragen zur Formularvalidierung
• Quellen

Was Formularvalidierung leistet und warum sie sich lohnt

Ein Kontaktformular, eine Newsletter-Anmeldung, ein Buchungsformular: Jedes dieser Formulare ist die Stelle, an der aus einem Besucher ein Kontakt wird. Genau hier entscheidet die Validierung, ob brauchbare Daten ankommen und ob der Besucher überhaupt bis zum Absenden durchhält.

Laut dem Leitfaden von MDN zur clientseitigen Formularvalidierung verfolgt die Validierung drei Ziele: Sie stellt sicher, dass Daten im richtigen Format ankommen, sie schützt die Daten der Nutzer und sie schützt die Anwendung selbst vor Missbrauch. Für Sie als Unternehmen heißt das ganz praktisch:

• Saubere Daten: Eine E-Mail-Adresse ohne @ ist für Ihr E-Mail-Marketing wertlos. Eine Telefonnummer mit zwei fehlenden Ziffern landet im Nichts.
• Weniger Nacharbeit: Wer im Vertrieb unvollständige Anfragen erst nachrecherchieren muss, verliert Zeit und oft auch den Lead.
• Mehr Sicherheit: Die Eingabevalidierung ist laut MDN eine wichtige erste Verteidigungslinie gegen Angriffe wie SQL-Injection oder Cross-Site-Scripting (XSS). Eine vollständige Sicherheitslösung ist sie allerdings nicht.
• Bessere Nutzererfahrung: Wer einen Fehler sofort sieht und ihn versteht, korrigiert ihn und schickt ab. Wer nach dem Absenden nur „Fehler“ liest, schließt oft den Tab.

Die Grundregeln im Überblick

Die meisten Regeln lassen sich direkt mit Bordmitteln von HTML festlegen. Der Browser prüft dann selbst und zeigt eine Standardmeldung. Die folgende Tabelle zeigt die wichtigsten Regeltypen.

Pflichtfelder

Pflichtfelder sind die häufigste Regel und zugleich die, bei der am meisten schiefgeht. Die W3C-Initiative für Barrierefreiheit empfiehlt, Pflichtfelder im Label klar zu kennzeichnen und sie zusätzlich mit required technisch zu markieren. Das Attribut aria-required kann Hilfstechnologien wie Screenreadern ebenfalls mitteilen, dass ein Feld ausgefüllt werden muss.

Die wichtigere Regel ist aber eine inhaltliche: Machen Sie nur Pflicht, was Sie wirklich brauchen. Für eine erste Anfrage reichen oft Name, E-Mail und Anliegen. Firmengröße, Budget und Telefonnummer können Sie später im Gespräch klären oder als freiwillige Felder anbieten. Wie viele Felder ein Formular verträgt, hängt stark vom Angebot ab. Im Beitrag über Lead-Magnet-Seiten, die konvertieren zeigen wir, wie Sie Feldanzahl und Gegenwert ausbalancieren.

Formate und Muster

Mit dem Feldtyp prüft der Browser die Grundform einer Eingabe, etwa ob eine E-Mail-Adresse wie eine E-Mail-Adresse aussieht. Für feste Schemata gibt es laut MDN das Attribut pattern mit einem regulären Ausdruck. Eine deutsche Postleitzahl lässt sich so mit pattern="[0-9]{5}" auf genau fünf Ziffern festlegen.

Vorsicht bei Mustern für Namen, Telefonnummern und internationale Adressen. Ein Muster, das nur Buchstaben von A bis Z erlaubt, lehnt „Müller“, „O'Brien“ oder „Nguyễn“ ab. Eine Telefonregel, die nur deutsche Festnetzformate kennt, blockiert Kunden aus Österreich, der Schweiz oder dem Rest der Welt. Faustregel: Prüfen Sie Formate nur dort streng, wo es ein eindeutiges Schema gibt, und akzeptieren Sie sonst Leerzeichen, Bindestriche und Ländervorwahlen.

Längen und Wertebereiche

Der HTML-Standard definiert maxlength für die höchste und minlength für die geringste Zahl an Zeichen in Textfeldern. Für Zahlen und Datumsfelder begrenzen min und max die erlaubten Werte. Ein Detail, das viele nicht kennen: Bei Uhrzeiten darf max laut MDN kleiner als min sein, etwa für ein Zeitfenster von 22:00 bis 04:00 Uhr über Mitternacht.

Setzen Sie Höchstlängen großzügig. Ein Nachrichtenfeld, das bei 200 Zeichen abschneidet, verärgert genau die Interessenten, die ausführlich beschreiben wollen, was sie brauchen, also oft die besten Leads.

Im Browser und auf dem Server: Warum Sie beides brauchen

Es gibt zwei Orte, an denen geprüft wird, und beide haben eine eigene Aufgabe.

Clientseitige Validierung läuft im Browser, entweder über die eingebauten HTML-Attribute oder per JavaScript. Sie gibt sofort Rückmeldung, noch bevor Daten verschickt werden. Das ist laut MDN ein wichtiger Teil einer guten Nutzererfahrung, weil Menschen ungültige Angaben direkt korrigieren können.

Serverseitige Validierung läuft dort, wo die Daten ankommen. Sie ist für die Sicherheit unverzichtbar, denn wie WebAIM erklärt, lassen sich Prüfungen im Browser umgehen. Wer Ihr Formular mit einem Skript direkt an den Server schickt, sieht Ihre schönen Browser-Prüfungen nie.

WebAIM empfiehlt deshalb ausdrücklich beides und rät außerdem, das Absenden eines Formulars nicht von JavaScript abhängig zu machen. Fällt ein Skript aus, muss das Formular trotzdem funktionieren und der Server trotzdem prüfen.

Der richtige Zeitpunkt für die Prüfung

Die Frage „Wie validiert man richtig?“ ist zu einem großen Teil eine Frage des Timings. Drei Zeitpunkte sind üblich:

1. Während der Eingabe: Die Prüfung läuft bei jedem Tastendruck. Das wirkt modern, nervt aber schnell. Wer gerade „max@“ tippt, bekommt schon eine Fehlermeldung, obwohl die Adresse noch gar nicht fertig ist. Sinnvoll ist das nur für positive Hinweise, etwa eine Anzeige, welche Passwortanforderungen schon erfüllt sind.
2. Beim Verlassen des Feldes: Die Prüfung startet, wenn der Nutzer zum nächsten Feld wechselt. Für Formate wie E-Mail oder Postleitzahl ist das meist der beste Moment, weil die Eingabe dann abgeschlossen ist.
3. Beim Absenden: Alle Felder werden gemeinsam geprüft, die Fehler erscheinen gesammelt. Das ist der Mindeststandard, den jedes Formular erfüllen muss, und die einzige Variante, die auch ohne JavaScript funktioniert.

In der Praxis bewährt sich eine Kombination: Formatprüfung beim Verlassen des Feldes, vollständige Prüfung beim Absenden und eine zweite, unabhängige Prüfung auf dem Server. Ein Pflichtfeld, das jemand noch gar nicht erreicht hat, sollte dagegen nicht vorab als Fehler rot leuchten.

Fehlermeldungen, die Menschen verstehen

Eine Validierungsregel ist nur so gut wie die Meldung, die sie auslöst. Die Standardmeldungen des Browsers sind ein Anfang, aber sie sind allgemein formuliert und sehen je nach Browser anders aus. Eigene Meldungen lohnen sich.

Wo die Meldung steht: Das Designsystem der britischen Regierung empfiehlt, Fehler zweifach anzuzeigen: in einer Zusammenfassung oben auf der Seite und direkt neben dem betroffenen Feld. Die W3C-Technik G139 beschreibt dazu Links von der Zusammenfassung zu den Fehlerfeldern, damit niemand das fehlerhafte Feld suchen muss. Bei kurzen Formularen mit drei oder vier Feldern reicht meist die Meldung am Feld.

Was erhalten bleibt: Nach einem Fehler müssen alle bereits ausgefüllten Felder wieder angezeigt werden, damit Nutzer nur das korrigieren, was falsch war. Auch das ist eine Empfehlung aus dem GOV.UK Design System, und sie ist vielleicht die wichtigste überhaupt. Ein Formular, das sich nach einem Tippfehler komplett leert, verliert fast jeden zweiten Anlauf.

Wie die Meldung klingt: Konkret, freundlich, mit Lösung. Ein paar Beispiele:

Vermeiden Sie Schuldzuweisungen wie „Sie haben einen Fehler gemacht“ und Fachbegriffe wie „Validierung fehlgeschlagen“. Die Meldung soll in einem Satz sagen, was fehlt und wie es richtig geht.

Barrierefreiheit: Validierung für alle Nutzer

Barrierefreie Validierung ist kein Extra, sondern macht Formulare für alle besser. Die Grundlagen:

• Sichtbare Labels für jedes Feld: Platzhaltertext im Feld ersetzt kein Label, weil er beim Tippen verschwindet.
• Fehler in Textform: Das WCAG-Erfolgskriterium 3.3.1 verlangt, dass erkannte Eingabefehler identifiziert und in Textform beschrieben werden. Ein roter Rahmen allein reicht nicht, denn Menschen mit Farbsehschwäche erkennen ihn nicht, und ein Screenreader liest ihn nicht vor.
• Fokus und Ansagen: Google beschreibt im Kurs zu barrierefreien Formularen, dass bei der Fehleranzeige der Tastaturfokus und ARIA-Live-Bereiche beachtet werden müssen, damit auch Screenreader-Nutzer die Meldung mitbekommen.
• Keine doppelten Eingaben: Seit WCAG 2.2 gilt das Kriterium 3.3.7, nach dem Angaben, die jemand im selben Vorgang schon gemacht hat, automatisch übernommen oder zur Auswahl angeboten werden sollen. Typisches Beispiel: Rechnungsadresse gleich Lieferadresse per Häkchen.

Auch Ihre Validierungsregeln selbst sollten vorab sichtbar sein. Wer erst nach dem Absenden erfährt, dass das Passwort ein Sonderzeichen braucht, fühlt sich zu Recht ausgebremst.

Häufige Fehler, die Anfragen kosten

Diese Muster sehen wir in Formularen immer wieder:

• Nur im Browser prüfen. Wer sich allein auf JavaScript verlässt, hat laut WebAIM sowohl ein Sicherheits- als auch ein Zugänglichkeitsproblem.
• Zu strenge Muster. Namen mit Umlauten, Bindestrichen oder Apostrophen werden abgelehnt, internationale Telefonnummern ebenso.
• Leerzeichen als Fehler werten. Eine IBAN oder Telefonnummer mit Leerzeichen ist korrekt. Entfernen Sie Leerzeichen lieber im Hintergrund, statt den Nutzer zu korrigieren.
• Zu viele Pflichtfelder. Jedes Pflichtfeld ist eine zusätzliche Hürde vor dem Absenden.
• Fehler ohne Erklärung. „Bitte prüfen Sie Ihre Eingaben“ ohne Hinweis auf das konkrete Feld.
• Geleerte Formulare nach dem Absenden. Der schnellste Weg, einen Interessenten zu verlieren.
• Nie getestet. Viele Formulare werden einmal gebaut und nie wieder mit echten Fehleingaben ausprobiert.

Gerade der letzte Punkt lässt sich leicht beheben. Wie Sie Varianten Ihrer Formulare und Seiten systematisch vergleichen, zeigt unsere Anleitung für Landingpage-A/B-Tests ohne Entwickler.

Checkliste: Ein Formular in acht Schritten sauber validieren

1. Felder ausmisten: Streichen Sie jedes Feld, das Sie für den nächsten Schritt nicht brauchen.
2. Pflichtfelder festlegen: Im Label kennzeichnen und technisch mit required markieren.
3. Passende Feldtypen wählen: email, tel, number, date. Auf dem Smartphone erscheint dann auch die passende Tastatur.
4. Formatregeln nur dort, wo es ein festes Schema gibt: Postleitzahl ja, Name nein.
5. Längen und Wertebereiche großzügig setzen.
6. Eigene Fehlermeldungen schreiben: pro Regel ein konkreter Satz mit Beispiel.
7. Serverseitige Prüfung ergänzen: alle Regeln aus dem Browser plus Schutz vor Missbrauch.
8. Mit echten Fehleingaben testen: auf dem Smartphone, nur mit der Tastatur und am besten auch einmal mit einem Screenreader.

Danach beginnt der zweite Teil der Arbeit: Was passiert mit den sauberen Daten? Wie Kontakte ohne Medienbrüche im CRM landen, beschreiben wir am Beispiel der Lead-Erfassung auf Messen. Wie es anschließend weitergeht, lesen Sie im Beitrag zum Workflow in der Leadgenerierung.

Unsere Sicht: Validierung ist Vertrieb, nicht nur Technik

Wir sehen Formularvalidierung selten als reines Technikthema. Für kleine und mittelständische Unternehmen ist das Formular oft der einzige Moment, in dem ein Interessent aktiv „Ja“ sagt. Jede unnötige Hürde an dieser Stelle kostet nicht nur einen Datensatz, sondern einen möglichen Kunden.

Deshalb raten wir zu einer einfachen Haltung: so wenig Regeln wie möglich, so viele wie nötig. Prüfen Sie streng, was Ihre Prozesse wirklich brauchen, also eine erreichbare E-Mail-Adresse für die Automatisierung oder ein gültiges Datum für die Terminbuchung. Bei allem anderen sollten Sie großzügig sein.

Der zweite Punkt, den wir in der Praxis oft sehen: Probleme entstehen an den Übergängen. Das Formular liegt in einem Tool, die Kontakte in einem anderen, das E-Mail-Marketing in einem dritten. Jede Schnittstelle hat eigene Regeln für Felder und Formate, und dabei geht etwas verloren. Wenn Website, Formular, Kontaktverwaltung und Automatisierung an einem Ort zusammenlaufen, gibt es weniger Stellen, an denen Daten unterwegs kaputtgehen. Genau dafür haben wir unsere Plattform gebaut.

— Thomas

Formulare, Kontakte und Automatisierung aus einer Hand

Mit Funnel-tunnel erstellen Sie Website, Funnels und Landingpages aus vorgefertigten Templates. Die Kontakte aus Ihren Formularen landen direkt in der integrierten Kontaktverwaltung und können sofort Ihre E-Mail-Automatisierungen oder Terminbuchungen anstoßen. Sie brauchen dafür keine technischen Vorkenntnisse und keine Sammlung einzelner Insellösungen. Einen Überblick über alle Bausteine finden Sie auf unserer Seite mit den Funktionen der All-In-One-Software. Wenn Sie Ihre erste Seite gleich aufsetzen wollen, hilft Ihnen die Anleitung Landingpages in 5 Schritten erstellen.

Häufige Fragen zur Formularvalidierung

Was ist der Unterschied zwischen Validation und Validierung?

Inhaltlich gibt es keinen. „Validation“ ist der englische Begriff, „Validierung“ die deutsche Entsprechung. In der Webentwicklung meinen beide dasselbe, nämlich die Prüfung von Eingaben gegen festgelegte Regeln. In anderen Fachgebieten wie der Pharmazie oder dem Qualitätsmanagement hat „Validierung“ eigene, viel weiter gefasste Bedeutungen.

Reicht die eingebaute HTML-Validierung aus?

Für die Nutzerführung ist sie eine solide Basis: Pflichtfelder, Feldtypen, Längen und Muster decken die meisten Fälle ab. Für die Sicherheit reicht sie nie, weil sich jede Prüfung im Browser umgehen lässt. Ergänzen Sie immer eine serverseitige Prüfung und für bessere Meldungen eigene Fehlertexte.

Wie prüfe ich, ob eine E-Mail-Adresse wirklich existiert?

Die Formatprüfung zeigt nur, ob eine Adresse richtig aufgebaut ist, nicht, ob sie erreichbar ist. Ob es die Adresse wirklich gibt und sie dem Absender gehört, zeigt am zuverlässigsten eine Bestätigungs-E-Mail mit Link. Bei Newsletter-Anmeldungen ist dieses Double-Opt-in-Verfahren ohnehin üblich.

Sollten Fehler schon während der Eingabe angezeigt werden?

Meist nicht. Wer mitten im Tippen eine Fehlermeldung sieht, wird verunsichert, obwohl die Eingabe noch gar nicht fertig ist. Besser ist die Prüfung beim Verlassen des Feldes und beim Absenden. Hinweise, was schon erfüllt ist, etwa bei Passwortregeln, sind dagegen während der Eingabe hilfreich.

Quellen

• MDN: Client-side form validation
• MDN: Input validation
• MDN: Das HTML-Element input
• WHATWG: HTML Standard, Form control infrastructure
• W3C WAI: Validating Input
• W3C WAI: Technik G139
• W3C WAI: Understanding SC 3.3.7 Redundant Entry
• WebAIM: Usable and Accessible Form Validation
• GOV.UK Design System: Recover from validation errors
• web.dev: Formulare
• BITV-Test: Prüfschritt 9.3.3.1 Fehlererkennung

Empfehlungen

• Terminbestätigung per E-Mail: Text, Vorlagen und Checkliste
• CRM-Felder standardisieren: So werden Kundendaten einheitlich