Jemand sendet dein Formular mit einer ungültigen E-Mail-Adresse ab. Dein Formular akzeptiert sie. Die Willkommens-E-Mail kommt zurück. Die Person hört nie von dir. Jemand anderes sendet das Formular mit fehlenden Pflichtfeldern ab. Es geht trotzdem durch. Dein Team hat unvollständige Daten. Beide Fehler passieren, weil die Validierung fehlt oder falsch ist.
Validierung prüft, ob Formulardaten gültig sind, bevor sie angenommen werden. Sie findet an zwei Stellen statt: im Browser und auf dem Server. Beides ist wichtig. Dieser Artikel zeigt, wie Validierung funktioniert, warum du beides brauchst und welche Fehler häufig vorkommen.
Was ist Validierung?
Die Validierung prüft, ob die Daten in einem Formular deine Anforderungen erfüllen. Pflichtfelder haben Werte. E-Mail-Felder enthalten ein @-Zeichen. Telefonfelder enthalten nur Zahlen. Datei-Uploads liegen unter dem Grössenlimit.
Ohne Validierung gelangen fehlerhafte Daten in dein System. Dein Backend stürzt ab. Dein E-Mail-Dienst lehnt Nachrichten ab. Du verschwendest Zeit damit, schmutzige Daten aufzuräumen.
Die Validierung findet an zwei Stellen statt: clientseitig (im Browser, vor dem Absenden) und serverseitig (auf deinem Server, nach dem Absenden). Beides ist nötig.
Clientseitige Validierung
Der Browser kann Formulardaten prüfen, bevor er sie sendet. HTML hat eingebaute Validierungsattribute. Auch JavaScript kann validieren.
HTML-Validierung
<input type="email" required> prüft, ob das Feld einen Wert hat und wie eine E-Mail-Adresse aussieht. Der Browser zeigt eine Fehlermeldung, wenn der Nutzer versucht, ein ungültiges Formular abzusenden.
Zu den HTML-Validierungsattributen gehören required, damit das Feld einen Wert haben muss, min/max für Zahlen, damit Werte im Bereich bleiben, minlength/maxlength für die Zeichenanzahl, pattern für reguläre Ausdrücke und type, um den Feldtyp selbst zu prüfen. Zum Beispiel prüft type="email" das Format, während type="number" nicht numerische Eingaben ablehnt.
Die HTML-Validierung funktioniert sofort ohne JavaScript, liefert gute Fehlermeldungen vom Browser und passt auf dem Smartphone die Tastatur an den Feldtyp an. Die Nachteile: Die Fehlermeldungen des Browsers sind allgemein und manchmal unklar, du kannst sie ohne JavaScript nicht anpassen, und verschiedene Browser zeigen unterschiedliche Meldungen.
JavaScript-Validierung
Für mehr Kontrolle validierst du mit JavaScript, zum Beispiel mit function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } und form.addEventListener('submit', (e) => { if (!validateEmail(input.value)) { e.preventDefault(); showError('Bitte gib eine gültige E-Mail-Adresse ein'); } });. Mit JavaScript-Validierung schreibst du eigene Regeln, zeigst eigene Fehlermeldungen und prüfst Felder schon während der Eingabe, also in Echtzeit. Zu den Nachteilen zählen: Sie braucht JavaScript (für die Sicherheit nicht verlässlich), sie erfordert mehr Code, den du pflegen musst, und sie kann Fehler anzeigen, bevor der Nutzer fertig getippt hat, wenn du beim input-Ereignis validierst.
Serverseitige Validierung
Nach dem Absenden prüft der Server die Daten noch einmal. Hier entsteht die echte Sicherheit.
Vertraue nie der clientseitigen Validierung. Jemand kann JavaScript abschalten. Jemand kann die Anfrage abfangen und die Daten ändern. Jemand kann curl oder ein anderes Tool nutzen, um fehlerhafte Daten zu senden, ohne dein Formular überhaupt zu verwenden.
Die serverseitige Validierung ist dein einziger Schutz. Sie ist nicht optional.
Wenn der Server die Formularübermittlung erhält, prüfe, ob Pflichtfelder vorhanden sind, validiere E-Mail-Format, Telefonformat und URLs, kontrolliere, ob Zahlen im erwarteten Bereich liegen, stelle sicher, dass Datei-Uploads den richtigen Typ und die richtige Grösse haben, achte darauf, dass die Daten nicht zu lang sind, und bereinige die Daten, um Injection-Angriffe zu verhindern. Schlägt die Validierung fehl, sende eine Fehlerantwort, damit das Formular nicht verarbeitet wird und der Nutzer erfährt, was nicht stimmt. Die serverseitige Validierung ist langsamer, weil der Nutzer auf eine Antwort warten muss, aber sie ist zuverlässig und sicher. Mach sie deshalb immer.
Wann du welche Art der Validierung nutzt
Die clientseitige Validierung dient der Nutzererfahrung. Sie sagt dem Nutzer sofort, wenn etwas nicht stimmt. Er muss das Formular nicht absenden, um zu erfahren, dass eine E-Mail-Adresse ungültig ist.
Die serverseitige Validierung dient der Datenintegrität und der Sicherheit. Sie sorgt dafür, dass fehlerhafte Daten nie in dein System gelangen.
Nutze beide. Clientseitig für Tempo und Rückmeldung. Serverseitig für Schutz und Sicherheit.
Häufige Fehler bei der Validierung
Nur clientseitig validieren
Jemand schaltet JavaScript ab, und deine Validierung ist weg. Jemand sendet mit curl fehlerhafte Daten per POST, und deine Validierung läuft nie. Am Ende steckt Müll in deiner Datenbank.
Validiere immer auf dem Server. Clientseitig ist nur ein Extra.
Zu streng validieren
Deine E-Mail-Validierung ist so streng, dass echte Adressen durchfallen. Deine Telefonvalidierung akzeptiert nur das US-Format und lehnt internationale Nummern ab. Dein Namensfeld lehnt Bindestriche, Apostrophe und andere gültige Zeichen ab.
Teste deine Validierung mit echten Daten. Bitte Nutzer aus anderen Ländern, sie auszuprobieren. Mach die Validierungsregeln so grosszügig wie möglich und fange trotzdem fehlerhafte Daten ab.
Keine klaren Fehlermeldungen zeigen
"Ungültige Eingabe." Was ist ungültig? Welches Feld? Was soll der Nutzer tun?
Fehlermeldungen müssen konkret sein: "Die E-Mail-Adresse muss zwischen 5 und 254 Zeichen lang sein." "Die Telefonnummer muss 10 Ziffern haben." "Das Passwort muss mindestens eine Zahl enthalten."
Zeige den Fehler neben dem Feld, das ihn ausgelöst hat. Verstecke Fehler nicht in einer Zusammenfassung, in der der Nutzer sie suchen muss.
Sensible Daten clientseitig validieren
Schicke Kreditkartennummern oder Passwörter nicht durch die clientseitige Validierung. Zeige sie nicht in der Browser-Konsole. Protokolliere sie nicht.
Validiere sensible Daten nur auf dem Server, über HTTPS.
Datei-Uploads nicht validieren
Jemand lädt eine 100 Megabyte grosse Datei hoch. Dein Server hat keinen Speicherplatz mehr. Jemand lädt eine ausführbare Datei hoch. Dein Server fängt sich einen Virus ein.
Validiere Dateityp und Grösse auf dem Server. Prüfe, ob die Datei wirklich der Typ ist, für den sie sich ausgibt. Verlasse dich nicht allein auf die Dateiendung oder den MIME-Typ.
Echtzeit-Validierung oder Validierung beim Absenden
Die Echtzeit-Validierung prüft jedes Feld, während der Nutzer tippt. Der Nutzer sieht sofort eine Fehlermeldung, wenn er etwas Falsches eingibt. Er kann es gleich korrigieren.
Nachteil: Zeigst du Fehler zu früh, wird der Nutzer frustriert. Zeige Fehler erst, nachdem der Nutzer das Feld verlassen hat (beim blur-Ereignis), nicht während er noch tippt.
Die Validierung beim Absenden prüft alles, wenn das Formular gesendet wird. Der Nutzer füllt das gesamte Formular aus und sieht dann alle Fehler auf einmal.
Nachteil: Der Nutzer muss zurückgehen und Fehler beheben, obwohl er schon abgesendet hat. Das unterbricht den Ablauf.
Best Practice: Validiere beim blur (wenn der Nutzer ein Feld verlässt) für Rückmeldung in Echtzeit. Validiere beim Absenden als letzte Kontrolle. Zeige alle Fehler auf einmal, wenn welche auftreten.
Validierung für bestimmte Feldtypen
E-Mail-Validierung
Eine vollständige E-Mail-Validierung ist komplex (RFC 5322 umfasst 60 Seiten). Prüfe daher in den meisten Fällen, ob der Wert ein @ und eine Domain enthält, mit const email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;. So erkennst du die meisten ungültigen Adressen, ohne so streng zu sein, dass echte Adressen durchfallen.
Telefon-Validierung
Das Telefonformat unterscheidet sich je nach Land. Das US-Format ist (123) 456-7890, das britische Format +44 20 7946 0958 und in Deutschland nutzt man +49 30 123456. Akzeptiere das internationale Format, entferne auf dem Server nicht numerische Zeichen und speichere die Nummer als Zeichenkette statt als Zahl, damit führende Nullen erhalten bleiben, wie sie in manchen Ländern vorkommen.
Passwort-Validierung
Ein gutes Passwort ist lang (mindestens 12 Zeichen) und schwer zu erraten. Verlange keine Sonderzeichen oder gemischte Gross- und Kleinschreibung, denn solche Regeln frustrieren Nutzer und verbessern die Sicherheit nicht. Gute Passwortanforderungen sind mindestens 12 Zeichen und das Vermeiden häufiger Muster (wie "123456" oder dem Namen des Nutzers). Nutze eine Anzeige für die Passwortstärke, damit der Nutzer sieht, wie stark sein Passwort ist.
Datums-Validierung
Prüfe, ob das Datum je nach Bedarf in der Zukunft oder Vergangenheit liegt. Ein Anmeldeformular für Veranstaltungen sollte Daten in der Vergangenheit ablehnen. Ein Formular für das Geburtsdatum sollte Daten in der Zukunft ablehnen.
So geht WEMASY mit Formularvalidierung um
WEMASY-Formulare enthalten eine eingebaute clientseitige Validierung (Pflichtfelder, E-Mail-Format usw.) für sofortige Rückmeldung. Wenn Formulare abgesendet werden, validieren die Server von WEMASY alle Daten vor der Verarbeitung noch einmal. So bekommen Nutzer schnelle Rückmeldung, und deine Daten sind geschützt.
Welche Validierungsfunktionen in deinem WEMASY-Tarif stecken, siehst du auf der Preisseite.