Home → Contao →

Verwendung: Bei fehlerhafter Formulareingabe springt der Browser zum Seitenanfang anstatt zum ersten falschen Feld

• Edit

Wolfgang Hutter

05 Apr, 2017 10:43 AM

Produkt: Open Sauce Contao
Contao-Version: 3.5.24
Browser und Browserversionen: Firefox 52.0.2

Ich bin sicher, das Problem ist schon oft aufgetaucht, aber ich kann nichts dazu in den FAQs finden: Ich habe mehrere Formulare, die z.T. deutlich länger als eine Bildschirmseite sind. Wenn ein Feld falsch ausgefült wurde, wird das Feld korrekt markiert (rote Schrift und so), aber die Seite wird ab dem Seitenanfang geladen, so dass ein Benutzer, der nicht wirklich genau auf die Titelleiste achtet, gar nicht sieht, dass ein Fehler aufgetreten ist, bzw. wo der Fehler liegt. Ist es nicht möglich, dass die Fehlerseite (die neu geladene Formularseite) zum ersten falschen Feld springt, so dass der User sofort sieht, was da passiert ist?

1. Support Staff 1 Posted by RockSolid Theme... on 05 Apr, 2017 01:22 PM

   

   Vielen Dank für Ihre Frage.

   Anscheinend haben Sie in den Formulareinstellungen über die Checkbox „HTML5-Validierung deaktivieren“ die browserseitige Validierung deaktiviert. Mit der HTML5-Validierung sollte der Browser automatisch zu dem fehlerhaften Feld springen.

   • Edit

2. 2 Posted by Wolfgang Hutter on 06 Apr, 2017 10:27 AM

   

   Die HTML5-Validierung ist schon eingeschaltet. Die prüft aber nur nach, ob das Feld leer ist, nicht aber, ob z.B. das Datum die korrekte Form hat. Diese Bedingungen werden erst nachgelagert abgefragt, wenn die HTML5-Prüfung keine Fehler mehr anzeigt. Die fehlerhaften EIngaben werden dann auch korrekt markiert, aber sie sind eben nicht zu sehen, weil die Seite am Seitenanfang angezeigt wird und nicht zum Fehler gescrollt wird, obwohl ich einen Code
   <script>
   document.querySelector('.error').scrollIntoView();
   </script>
   eingefügt habe.

   • Edit

3. Support Staff 3 Posted by RockSolid Theme... on 06 Apr, 2017 12:13 PM

   

   Versuchen Sie es bitte mit folgendem JavaScript-Code:

   <script>
   setTimeout(function() {
       document.querySelector('.error').scrollIntoView();
   });
   setTimeout(function() {
       document.querySelector('.error').scrollIntoView();
   }, 1000);
   document.querySelector('.error').scrollIntoView();
   </script>
   

   • Edit

4. 4 Posted by Wolfgang Hutter on 07 Apr, 2017 05:49 AM

   

   Perfekt! Danke schön. Funktioniert prächtig.

   • Edit