Ergebnis 1 bis 22 von 22

Thema: Formular Error - Seite springt nicht zu "falschem" Feld

  1. #1
    Contao-Fan
    Registriert seit
    01.11.2013.
    Beiträge
    652

    Standard Formular Error - Seite springt nicht zu "falschem" Feld

    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?

  2. #2
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.632
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

  3. #3
    Contao-Fan
    Registriert seit
    01.11.2013.
    Beiträge
    652

    Standard

    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.

  4. #4
    Contao-Nutzer
    Registriert seit
    24.02.2017.
    Beiträge
    179

    Standard

    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

  5. #5
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    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.

  6. #6
    Contao-Nutzer
    Registriert seit
    24.02.2017.
    Beiträge
    179

    Standard

    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.

  7. #7
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    PHP-Code:
    document.querySelector('.error').scrollIntoView(); 
    Oder in ein form.html5 Template.
    PHP-Code:
    ...
    </
    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  8. #8
    Contao-Nutzer
    Registriert seit
    24.02.2017.
    Beiträge
    179

    Standard

    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.

  9. #9
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  10. #10
    Contao-Nutzer
    Registriert seit
    24.02.2017.
    Beiträge
    179

    Standard

    @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?

  11. #11
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    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.

  12. #12
    Contao-Nutzer
    Registriert seit
    24.02.2017.
    Beiträge
    179

    Standard

    Das Problem ist gelöst. Der Code, der bei mir jetzt funktioniert ist:
    Code:
    <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.

  13. #13
    Contao-Nutzer Avatar von miniA4kuser
    Registriert seit
    14.11.2013.
    Beiträge
    130

    Standard

    Diese Reduzierung
    Code:
    <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.
    Tippfehler unterliegen nicht dem Copyright und können frei weitergegeben werden.

  14. #14
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    PHP-Code:
    <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.
    Geändert von Andreas (26.04.2017 um 10:19 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  15. #15
    Contao-Nutzer
    Registriert seit
    24.02.2017.
    Beiträge
    179

    Standard

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

  16. #16
    Contao-Nutzer
    Registriert seit
    07.07.2009.
    Beiträge
    72

  17. #17
    Contao-Nutzer
    Registriert seit
    24.02.2017.
    Beiträge
    179

    Standard

    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?

  18. #18
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  19. #19
    Contao-Nutzer
    Registriert seit
    24.02.2017.
    Beiträge
    179

    Standard

    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.

  20. #20
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    PHP-Code:
    document.querySelector('.error').findeDenVorfahren('.ueber-dem-input').scrollIntoView(); 
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  21. #21
    Contao-Nutzer
    Registriert seit
    24.02.2017.
    Beiträge
    179

    Standard

    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.

  22. #22
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Dann zeig mal einen Link zur Seite und sage, wohin du skrollen möchtest.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •