Contao Formulare: Zu Fehlermeldung springen

Ich hatte vor Kurzem das Problem, auf einer etwas älteren Contao-Installation ein längeres Registrierungs-Formular einrichten zu müssen. Das Problem hier war, dass bei falsch ausgefüllten Pflichtfeldern zwar eine Fehlermeldung ausgegeben wurde, diese jedoch mitunter außerhalb des Viewports lag und vom Benutzer daher gar nicht wahrgenommen wurde.

Die Lösung dafür ist wie folgt:

1. Neues Seitenlayout anlegen, indem das Layout der Seite, in der das Formular eingebunden wird, kopiert wird
2. In dem neuen Seitenlayout dann den folgenden Javascript-Code einfügen:
   
   <script> // Form field focus window.addEvent('load', function() { var el = $$('p.error'); if (el[0]) { if (el[0].getPosition().y > window.getSize().y) { window.scrollTo(0, el[0].getPosition().y - 150); } } }); </script>

   1 2 3 4 5 6 7 8 9 10 11 12

   <script> // Form field focus window.addEvent('load', function() {         var el = $$('p.error');         if (el[0]) {                 if (el[0].getPosition().y > window.getSize().y) {                         window.scrollTo(0, el[0].getPosition().y - 150);                 }         } }); </script>

3. In der Seitenstruktur der entsprechenden Seite das Layout zuweisen.

Mit diesem Workaround sind die Fehlermeldungen dann im Viewport. Ich habe mittels css dann noch .error in Rot eingefärbt, damit die fehlerhaft ausgefüllten Felder direkt ins Auge springen.