medamind

Contao: die Klasse .error

Weil es gerade so gut zu Fehlermeldungen in Formularen passt, möchte ich hier noch einiges Speziell zu Contao schreiben. Auch wenn wir es uns nicht wünschen: es kann passieren, dass der Benutzer eine Fehleingabe im Formular macht und dies nicht mit einer freundlichen Erfolgsmeldung sondern einer Fehlermeldung quittiert wird.

Contao bietet einige Möglichkeiten, fehlerhaft ausgefüllte Formulare so zu gestalten, dass die Fehler visuell schnell erfasst und behoben werden können.  Hier geht es zunächst im Wesentlichen um die Möglichkeiten zur Hervorhebung und Gestaltung einer Fehlermeldung, demnächst dann um weitere individuelle Anpassungen.

Wann treten Fehler auf?

Zunächst ist es wichtig zu verstehen, wann Fehler überhaupt auftreten können. Zum einen ist das der Fall bei nicht ausgefüllten Pflichtfeldern und zum anderen bei Feldern, die nach einem bestimmten Validierungsmuster ausgefüllt werden müssen. Ein Sonderfall ist zusätzlich das weitere Pflichtfeld Sicherheitsfrage.

Hat man also im Formulargenerator eine dieser Angaben gemacht und werden diese nicht befolgt, ist das Formular fehlerhaft und kann nicht abgesendet werden. Wann das passiert, hat sozusagen der Webdesigner in der Hand.

Wie sieht ein fehlerhaftes Formular aus?

Contao unterscheidet wieder zwischen

• nicht ausgefüllten Pflichtfeldern
• nicht eingehaltenen Mustern
• einer nicht beantworteten Sicherheitsfrage

und das sieht dann beispielsweise folgendermaßen aus:

Die Formatierung der Fehlermeldung

Um den Fehler samt seiner Beschreibung und Hilfestellung schön hervorzuheben, bringt Contao die CSS-Klasse .error mit.  Ein Blick in den Quellcode:

<label for="ctrl_2" class="mandatory error“>
<span class=”invisible”>Mandatory field</span>
Enter your name<span class=”mandatory”>*</span>
</label>
<p class=”error“>Field “Enter your name” must not be empty!</p>
<input type=”text” name=”Name” id=”ctrl_2″ class=”text mandatory error” value=”" />
<label for=”ctrl_3″ class=”mandatory error“>
<span class=”invisible”>Mandatory field</span> Enter your E-Mail Adress<span class=”mandatory”>*</span>
</label>
<p class=”error“>Please enter a valid e-mail address!</p>
<input type=”text” name=”Email” id=”ctrl_3″ class=”text mandatory error” value=”anne@test” />[...]
<p class=”error“>Please answer the security question!</p>
<input type=”text” name=”[...]” id=”ctrl_6″ class=”captcha mandatory error” value=”" maxlength=”2″ />
<span class=”captcha_text error“>[...]</span>

Contao lässt also einigen Spielraum. Die Klasse error wird an folgende Elemente vergeben:

• zugehörige Labels
• Paragraph Element mit Erklärungtext
• betroffenes (Text) Feld

Dies bedeutet: Änderungen für .error betreffen alle Elemente der Klasse. Der Screenshot oben zeigt ein Beispiel, in dem die Farbe sowohl für Label, als auch für den Erklärungstext und das betroffene Textfeld geändert wird.  Man kann differenzieren: label.error, p.error oder input.error usw.

Es geht aber natürlich noch mehr: Hintergrundfarbe, Hintergrundbild, Rahmen, beispielsweise so: Hier wurde nur die Farbe von p.error geändert, input.error hingegen erhält einen entsprechend hervorstechenden Rahmen und eine Hintergrundfarbe.

Die Positionierung der Fehlermeldung

Die Position der Fehlermeldung (auch eine Frage des vohergehenden Artikels) kann übrigens auch geändert werden, was man allerdings nicht sofort sieht, wenn man sich nicht durch die Contao API wühlt:

Für die Anzeige der Formular Elemente gibt es eine Reihe von Templates, beispielhaft nenne ich hier mal form_widget.tpl. Öffnet man diese Datei, findet man dort schon einen Hinweis auf die Generierung der Fehlermeldung, die Funktion, die aufgerufen wird, um beispielsweise Textfelder so zu erzeugen, dass ggf auch eine Fehlermeldung angezeigt werden kann, heißt generateWithError().

Ersetzt man im Template die Zeile <?php echo $this->generateWithError(); ?> durch <?php echo $this->generateWithError(true); ?>, so wird die Fehlermeldung nicht mehr oberhalb des betroffenen Elements sondern unterhalb angezeigt.

Noch mehr?

Im vorhergehenden Beitrag ging es unter anderem die Formulierung der Fehlermeldungen und die kommen in Contao zunächst etwas allgemeingültig daher. Ein bisschen Blick unter die Motorhaube und schon wird offensichtlich, dass Contao eine Menge Möglichkeiten bietet, nicht nur die Texte anzupassen und einzelne Fehler damit individueller zu beschreiben sondern auch einiges mitbringt, um ein fehlerhaftes Formular noch benutzerfreundlicher zu gestalten.

Wie man das macht und wie man Contao an dieser Stelle ausreizen kann, erzählt ein weiterer Beitrag, demnächst auf medamind.