Affenformular – Fehlerausgaben im Formular selbst

Immer wieder liest man in den verschiedenen Hilfeforen im Web, ich selbst versuche mich helfend im Forum bei SelfHTML einzubringen, die Frage nach einem Formular, welches den Fehler nicht auf einer neuen Seite, sondern gleich im Dokument anzeigt. Ich löse dies bei meinen eigenen Projekten schon seit Jahren so, weil ich diese Lösung als die für den Benutzer am besten verständliche halte. Man muss nicht irgendwelche zurück Buttons klicken, bekommt sofort an der richtigen Stelle den Fehler angezeigt und läuft nicht Gefahr die Formulardaten bei einem Browserzurück zu verlieren.Interessant ist dabei zu erwähnen, dass man hier natürlich auch mittels JavaScript eine Validierung der Daten durchführen könnte. Dies sollte aber nicht der einzige Ansatz sein. JavaScript kann und wird sehr häufig von Benutzern deaktiviert. Meine Ansätze hier beziehen sich auf PHP. Ich verzichte bewusst auf Codeangaben zum eigentlichen Scripting, da dies auf den verlinkten Seiten ausführlich genug dargestellt ist. Hier sollen nur weitere Ansätze und Sicherheitstipps gegeben werden.

Eine serverseitige Validierung mit einer serverseitigen Scriptsprache ist daher immer Mittel der Wahl. Ich wundere mich immer wieder wie oft hier auf unmögliche Art und Weise den Nutzern Fehler mitgeteilt werden und dabei die Formulare validiert werden.

Fehler die gemacht werden:

  • Umleitung auf eine Seite die die Fehler auflistet. Mit Sicherheit hat man beim Zurückklicken zum Formular vergessen was man „vergessen“ hatte.
  • Reine Validierung der Daten durch JavaScript mit der großen Wahrscheinlichkeit, dass regelmäßig leere Formulardaten im Datenbestand auftauchen.
  • Bei Validierung durch JavaScript und der scheinbaren „Sicherung“ des Formulars durch mittels JavaScript eingeblendeten Absendebuttons, werden Benutzer ausgeschlossen welche JavaScript bewusst oder ungewollt deaktiviert haben. (Und das sind bei meinen Angeboten zwischen 20% und 35 % der Besucher (nicht Nutzer) – wer auf diesen Prozentsatz Kunden verzichten kann, wird sich glücklich schätzen, oder einfach nur doof sein ;) – Immerhin bei .NET 1.1 die Standard Validierung. Ich habe schon ganz schön heftige Diskussionen diesbezüglich mit Software-Entwicklern gehabt.
  • Ausgabe der Fehler irgendwo auf der Seite, anstatt diese mittels einer Änderung des Stylesheets hervor zu heben, so dass auch andere Ausgabemedien als ein Bildschirm diese zuordnen können.

Aus diesem Grund sollte man immer folgendes bei einem sogenannten Affenformular (und bei allen anderen) beachten:

  • Nach Absenden des Formulars auf sich selbst mittels $_SERVER['PHP_SELF']; (ich hatte hier immer dieses böse Sicherheitsloch zu PHP_SELF im Beitrag und nie sagte jemand etwas), indem man einfach wieder die selbe Datei aufruft, sollte dieses zuerst alle Daten validieren und dann eine beliebige boolean Variable setzen, damit man darüber entscheiden kann wie man weiter verfährt.
  • Hervorhebung der nicht validierenden Angaben. Hierzu bietet sich semantisches Markup <strong> <em> oder auch eine Änderung des Stylesheetes an.
  • Man sollte an Spamschutz denken. Keine E-Mails an eingegebene Adressen versenden, oder diese nur nach Opt-In Prüfung. Wenn man gar nicht darauf verzichten kann (sicher, dass es kein möchte ist?) dann sollte man zumindest die IP kurzfristig speichern und weitere E-Mails über diese IP erst nach ca. 5 Minuten erlauben
  • Weiterer Spamschutz wäre die Darstellung eines leeren Textfeldes, welches man als unwichtig deklariert und mittels CSS ausblendet. Ein Spamrobot wird sicherlich zuerst einmal alle Felder ausfüllen, da dieser zur Zeit noch keine Stylesheets interpretiert. Sollte also dieses Feld mit Werten übergeben werden, hat man es sicherlich nicht mit einer regulären Anfrage zu tun.
  • Die nächste und etwas aufwändigere, aber dennoch praktikabel einsetzbare Lösung, wäre die Zeitschiene. Kein Mensch wird innerhalb 5 Sekunden ein Formular lesen, ausfüllen und absenden. Wenn man also hier ansetzt, dann kann man getrost alle Postings, welche in einer Zeit von unter 5 Sekunden abgesetzt wurden, verwerfen.
  • Ich setze oftmals noch eine Übersichtsseite ein, in der dem Benutzer (im selben Script) aber eben ohne Formularelemente, das Ergebnis seiner Anfrage angezeigt wird. Erst beim erneuten Betätigen eines Absendenbuttons werden die Eingaben verarbeitet.

Ansätze mittels Stylesheets oder semantischen Markups zur Fehlerdarstellung:

Das folgende Beispiel zeigt die Möglichkeit beim erneuten Laden der Seite dem Eingabefeld und dem Label eine Klasse zuzuordnen die diese auf dem Bildschirm kennzeichnen und gleichzeitig eventuell die Ausgabe an einem Screenreader beeinflussen.

<label class="error" for="city">PLZ, Ort:*</label> 

<input class="error" tabindex="4" name="city" id="city" value="" type="text">

Das nächste Beispiel zeigt die Option der Markupänderung, womit selbst ohne Stylesheets eine geänderte Darstellung erreicht wird. Dies kann und sollte auch in Kombination mit dem ersten Beispiel eingesetzt werden.

<label class="error" for="city"><strong>PLZ, Ort:*</strong></label> 

<input class="error" tabindex="4" name="city" id="city" value="" type="text">

Sollten noch Anmerkungen zu meinen Ausführungen gemacht werden müssen, schreibt mir einen Kommentar. Auf den unten verlinkten Seiten sollte die Technik zum Erstellen eines solchen Formulars ausführlich genug beschrieben sein. Wenn man dies nicht versteht, sollte man aus Gründen der eigenen Systemsicherheit lieber die Finger davon lassen.

Referenzseiten mit Scriptansätzen zum Affenformular: