Formular Error - Seite springt nicht zu "falschem" Feld

[gm-team]

Liebe Gemeinde,

ich habe ein sehr langes Formular. Wenn man irgendwo weiter unten eine falsche Angabe (zB ungültige Zeichen) trifft und das Formular versucht abzusenden, springt die Seite an den Anfang des Formulars. Man muss also runterscrollen und suchen wo der Fehler liegt.

Für eine web-affine Person kein wirkliches Problem, doch hat sich gezeigt dass immer wieder Leute Probleme mit unseren Formularen haben, weil diese den genauen Vorgang mit der Dankesseite nicht kennen. Diese nehmen an "Aha, ist eh rauf gesprungen, hat also funktioniert" und es wird nie ein Formular abgesendet.

Hatten andere das Problem auch schon? Weiß jemand eine Lösung?

[do_while]

Teile doch das Formular in mehrere Seiten auf, das nimmt auch etwas die Scheu vor so langen Formularen.

[gm-team]

Ja, das wäre eine Möglichkeit.

Wobei ich es in diesem einen Fall auch ganz gut finde dass man alles in der Übersicht hat.
ZB die Tarife stehen weiter unten, diese möchte man natürlich zuerst sehen bevor man alles ausfüllt.
Aber klar, das könnte man umstrukturieren.

Dennoch würde mich interessieren ob es eine Möglichkeit gibt - man kennt das ja von zig anderen Formularen - dass die Seite auf das "falsche" Element springt.

[robinhutter]

Hallo zusammen,

es wundert mich, dass diese Frage bisher keine weitere Antwort bekommen hat. Ich habe das selbe Problem und denke mir, dass dieses Verhalten (zum fehlerhaften Feld zu springen und nicht zum Anfang) doch eigentlich Standard sein sollte - und Contao wurde inzwischen ja diesbezüglich vielleicht auch weiter entwickelt... Gibt es womöglich irgendwelche "Schalter", die ich bisher übersehen habe? Oder muss man so eine Fehlerbehandlung komplett selbst programmieren? Falls es hilft: Ich benutze Open Sauce.

Tia

[PaddySD]

So wie das hier beschrieben steht ist es aber nur, wenn man den clientseitigen Check ausmacht und das Formular gesendet wird zum validieren. Also eher der Ausnahmefall. Normalerweise sollte der JS-check auf genau das Feld springen, dass fehlerhaft ist.

[robinhutter]

Hmmm. Ich habe nichts "ausgemacht". Ist der standardmäßig aus? und wenn ja (oder auch sonst): Wie aktiviere ich den JS-Check? Ich finde dazu keine Einstellung.

[Andreas]

Die HTML5-Form-Validierung kann ja nicht die Validierung von Contao ersetzen. Selbst wenn sie eingeschaltet ist, kann ein Formular erst durch die Validierung mit Contao als gültig eingestuft werden.

Deshalb kannst du sowas hier in dein JS setzen.

document.querySelector('.error').scrollIntoView(); 

Oder in ein form.html5 Template.

...
</div>
<script>
document.querySelector('.error').scrollIntoView();
</script>
<!-- indexer::continue -->
... 

Feature-Requests auf Github werden für Contao 3.5 nicht mehr angenommen, aber für Contao 4. Es müsste also eine Checkbox in den Formulareinstellungen vorhanden sein "Scroll to error". Bei aktivierter Checkbox muss entsprechendes JS im FE eingefügt werden.

Edit: Die Browservalidierung schaltet man im Formular ein bzw. aus.

[robinhutter]

Ah. Hab's gefunden... Ist m.E. etwas "andersherum" formuliert: "HTML5-Validierung deaktivieren". Das habe ich deaktiviert und jetzt funktioniert es ganz prima. Danke für den Hinweis.

[MacKP]

Feature-Requests auf Github werden für Contao 3.5 nicht mehr angenommen, aber für Contao 4. Es müsste also eine Checkbox in den Formulareinstellungen vorhanden sein "Scroll to error". Bei aktivierter Checkbox muss entsprechendes JS im FE eingefügt werden.

Das war mal im Core. Es wurde aber entschieden, dass so etwas besser vom Admin bereitgestellt wrird per eigenem JS (da der Core sonst motools und jquery hätte pflegen müssen).
Wenn Ihr das also als Feature-Wunsch ins Ticket System bringen wollt, wäre es sinnvoll erst die alten Tickets dazu zu suchen ;-)

Viele Grüße

[robinhutter]

@Andreas: nach etlichem Suchen und Probieren, habe ich es geschafft, den JS-Code in mein Dokument zu bekommen. Er wird im Quelltext jedenfalls angezeigt. screen.jpg
Aber die Seite wird trotzdem am Seitenanfang geladen. Übersehe ich etwas?

[PaddySD]

Die HTML5-Form-Validierung kann ja nicht die Validierung von Contao ersetzen. Selbst wenn sie eingeschaltet ist, kann ein Formular erst durch die Validierung mit Contao als gültig eingestuft werden.
[...]

Schon richtig, aber wenn die Client Validierung "normal" arbeitet, fängt das ja die Mehrzahl der Fälle schon ab, das meinte ich damit. Wenn damm wirklich etwas "falsch" ist, z.B. eine bereits vergebene E-Mal-Adresse, dann kann das natürlich nur contao wissen, und nicht das JS.

Ich finde ohnehin, dass man das nicht überbewerten darf. Es wird immer einen Fall geben, den Du nicht abfangen kannst. Wenn Du jetzt z.B. mit dem Script gegen arbeitest, was machst Du dann, wenn jemand das Script blockt - wieder kein scrollen...

Ich stelle zumindest bei den meisten Senioren (wir machen ehrenamtlich PC-Schulungen für Senioren) fest, dass die das gebacken kriegen. Die haben auch die Zeit und scrollen eine Seite auch dreimal rauf und wieder runter. Gut sichtbar muss der Error halt sein. Ein schmaler Rand um das Feld ist zu wenig. Lieber dick, fett rot, dann wird's gesehen. Wie Du das mit Deinem ästhetischen Bewusstsein in Einklang bringst, ist dann wieder eine andere Frage.

[robinhutter]

Das Problem ist gelöst. Der Code, der bei mir jetzt funktioniert ist:

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

Eingetragen am Ende von form.html5
Danke an alle die mit überlegt haben.

[miniA4kuser]

Diese Reduzierung

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

sollte den gleichen Effekt bringen. Das alles funktioniert aber nur, wenn das entsprechende DOM auch komplett innerhalb einer Sekunde geladen wurde.

[Andreas]

Ich bin davon ausgegangen, dass das Script funtioniert, wenn es unter dem Forumular oder am Ende vom Body eingebunden wird. Wenn nicht, dann solltest du sicherstellen, dass der DOM geladen ist.

<script>
/* JS (vanilla) */
document.addEventListener("DOMContentLoaded", function(event) {
  document.querySelector('.error').scrollIntoView();
});
</script> 

@PaddySD: Ich finde es wichtig, dass sofort zu erkennen ist, dass das Absenden nicht erfolgreich war. Deswegen finde ich sone Lösung gut.

Man könnte im Template noch versuchen einen Hashtag zum Formular an die URL zu hängen, was dann ohne JS direkt das Formular anspringen müsste.

[robinhutter]

War einige Tage weg. Deswegen die verspätete Antwort. Ich probier die "reduzierte" Lösung bei Gelegenheit aus. Danke für den Hinweis.

[madmaharaja]

Siehe auch https://github.com/contao/core/issues/7765

[robinhutter]

Bin jetzt endlich dazu gekommen, mich wieder um die Sache zu kümmern... Nochmals danke für alle Hinweise. Den Link zu dem github-Thread habe ich angeschaut. Nachdem der Code, der hier gepostet wurde (auch der verkürzte) aber gut funktioniert, möchte ich den Code nicht unnötig aufblasen. Ist das kurzsichtig oder übersehe ich etwas?

[Andreas]

Ich weiß nicht, was du mit "verkürzter Code" meinst. Die Idee eine Sekunde zu warte bevor man das JS aufsetzt halte ich für nicht so gut. Normal ist es, dass man sicherstellt, dass der DOM geladen ist. Das macht das letzte Beispiel.

[robinhutter]

Mit "verkürzt" meinte ich die vorgeschlagenen kürzeren Versionen (im Gegensatz zu der zuerst hier geposteten, längeren Version, die ich vorher verwendet habe). Ich habe jetzt die Deine implementiert, die auf das Laden des DOM wartet. Und die funktioniert prima. Ich bin jetzt noch am Rumprobieren, wie ich es hinbekomme, dass die Zeile über dem Input-Feld auch noch zu sehen ist, aber mit dieser Lösung kann ich schon mal gut leben. Danke.

[Andreas]

Meine Version ist Vanilla JS. Wenn du gezielter scrollen möchtest, kannst du deine Bibliothek bemühen (MooTools oder jQuery), damit ist es einfacher ausgehend von deinem .error-Element das gewünschte darüber liegende Element zu finden. Diese Bibliotheken bieten auch Scrollfunktionen, falls dir das vanilla scrollIntoView() nicht reicht. Achte dann darauf, dass du den entsprechenden Wrapper mit dem DOMContentLoaded deiner Bibliothek benutzt.
https://github.com/contao/core/blob/...on.html5#L4-L5
https://github.com/contao/core/blob/...on.html5#L3-L4

Mit Vanilla müsste das schematisch in etwa so gehen.

document.querySelector('.error').findeDenVorfahren('.ueber-dem-input').scrollIntoView(); 

[robinhutter]

Du traust mir ja was zu.... Ich bin was JS angeht ziemlich blutiger Laie. Deine Links habe ich angeschaut, aber ehrlich gesagt, verstehe ich nicht wirklich die Verbindung zu meinem Problem. Vielen Dank für Deine Bereitschaft, einem JS-Muggel zu helfen, aber ich glaube, das ist mir noch eine bis zwei Nummern zu hoch. Kein Stress. Ich lass das vorerst einfach so und kümmere mich dann drum, wenn ich dazugelernt habe oder wenn sich jemand beschwert.

[Andreas]

Dann zeig mal einen Link zur Seite und sage, wohin du skrollen möchtest.