TYPO3 & formhandler: Schönere Fehlermeldungen mit CSS

Die relativ neue formhandler-Extension ist ein mächtiges (und längst überfälliges) Werkzeug zum Erstellen und Abhandeln von HTML-Formularen unter TYPO3. Mit einem kleinen Trick lassen sich auch sehr ansprechende Fehlermeldungen ins Formular integrieren. Da dieser nicht deutlich in der Anleitung beschrieben wurde, zeige ich hier eine kleine Anleitung.

Der Formhandler ist eine sehr flexible TYPO3-Erweiterung, auch in Bezug auf  die Darstellung von Fehlern im Formular:

• Fehlermeldungen können als Liste dargestellt werden.
• Fehler können einzeln angezeigt werden (z.B. über oder unter dem Eingabefeld).
• Globale Fehlervariablen können definiert werden.

Im Folgenden bedienen wir uns der zwei letzten Punkte. Ziel ist es, Fehlermeldungen in folgendem Stil zu erzeugen:

Die rot gestrichelte Box soll natürlich nur bei Fehlern erscheinen. In formhandler kann man dazu eine schlecht dokumentierte TS-Anweisung benutzen, nämlich isErrorMarker.

Das TypoScript-Setup des Template muss folgende Anweisungen enthalten, damit es funktioniert:

Bei Fehlern in der Formulareingabe werden also zwei Elemente erzeugt:

• ein div-Wrapper für einzelne Fehler
• ein isErrorMarker

Der isErrorMarker enthält lediglich „error”. Dies ist der Name der CSS-Klasse, die wir für die Fehlerbox verwenden werden.

Nun müssen wir die notwendigen Marker zur Formular-Vorlage hinzufügen. Dies sieht dann beispielsweise so aus:

Die Details zu Templates und Fehlermeldungen findet man in der Anleitung von formhandler. Man beachte im obigen Listing die beiden Fehlermarker: ###error_name### zeigt den Fehler selbst an. Dieser wird von TYPO3 mit dem im TS angegebenen div umrahmt.

Interessanter ist der Marker ###is_error_name###: Dieser befindet sich innerhalb des class-Attributs des div-Tags, welches das gesamte Feld einrahmt. Der Marker wird vom Content Management System gesetzt, wenn ein Fehler im Feld „name” vorliegt; und zwar mit dem Inhalt, der oben im TS festgelegt wurde. In unserem Fall ist dies die Zeichenkette „error”. Immer wenn ein Fehler vorliegt, wird dem div also eine zusätzliche Klasse zugewiesen! Das ist im Grunde die ganze Magie.

Jetzt fehlen lediglich noch die CSS-Klassen „error” und „errormessage”. Ein Beispiel dafür in folgendem Listing – viel Spaß damit! Ein Beispiel für die dekorativen Fehlermeldungen findet sich übrigens im Kontaktformular von AUXNET.