Contao-Camp 2024
Ergebnis 1 bis 24 von 24

Thema: Formular Eingabefehler

  1. #1
    Contao-Nutzer
    Registriert seit
    12.11.2009.
    Beiträge
    14

    Standard Formular Eingabefehler

    Hallo Contao-Community!

    Ich habe auf mehreren Seiten Formulare, die erst nach einigem scrollen weiter unten auf der Seite sitzen. Wenn dort nun Fehler bei der Eingabe vorliegen, landet der Besucher immer wieder oben auf der Seite und es ist nur im Titel ersichtlich, dass ein Eingabefehler vorliegt.

    Jetzt habe ich mir mit einem Anker beholfen und zwar im Form-Template:

    <<?php echo $this->hl; ?>><a name="formular"><?php echo $this->headline; ?></a>

    und

    <form action="<?php echo $this->action; ?>#formular" …

    ist das eine gute Praxis - oder gibt es einen geschickteren Weg? Ich habe auf Firefox, Safari, und runter bis IE6 getestet und konnte keine Probleme feststellen.

    Was meint Ihr?

    Viele Grüße & Dank,

    George

  2. #2
    Community-Moderator Avatar von schman
    Registriert seit
    20.06.2009.
    Ort
    Dornbirn
    Beiträge
    3.739
    User beschenken
    Wunschliste

    Standard

    also wenn du das Template zuvor kopiert hast ist das absolut legitim, meiner Meinung nach.

    Falls es dir nichts ausmachst könntest du auch eine Erweiterung einsetzen. Hierzu würde sich die x_dma_niceerros anbieten.

  3. #3
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.548
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo GeorgeDorn,

    welches Template genau hast Du denn angepasst?

    Eigentlich ist im Template "form.tpl" bereits eine Abfrage eingebaut, welche Dir dann im Fehlerfall an das erste Element mit dem Fehler springt:
    PHP-Code:
    <?php if ($this->hasError): ?>

    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    window.scrollTo(null, ($('<?php echo $this->formId?>').getElement('p.error').getPosition().y - 20));
    //--><!]]>
    </script>
    <?php endif; ?>
    Damit das aber korrekt funktioniert, muss das Formular mit dem Formulargenerator erzeugt worden sein und die Fehlermeldung innerhalb eines <p>-Tags mit CSS-Klasse "error" generiert werden. Falls das nicht der Fall ist bzw. wenn Du hier Änderungen vorgenommen hast, dann müsste man das ggf. anpassen.
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  4. #4
    Contao-Nutzer Avatar von jabadoo
    Registriert seit
    15.08.2009.
    Beiträge
    63

    Frage

    Hallo Community!

    Habe gleiches Problem wie oben bereits beschrieben:
    Ich habe auf mehreren Seiten Formulare, die erst nach einigem scrollen weiter unten auf der Seite sitzen. Wenn dort nun Fehler bei der Eingabe vorliegen, landet der Besucher immer wieder oben auf der Seite und es ist nur im Titel ersichtlich, dass ein Eingabefehler vorliegt.
    Folgende Änderungen habe ich am form_widget.tpl vorgenommen (wie hier im Forum mal vorgefunden):
    Code:
    <?php if (!$this->tableless): ?>
      <tr class="<?php echo $this->rowClass; ?>">
        <td class="col_0 col_first"><?php echo $this->generateLabel(); ?><?php if ($this->mandatory): ?><span class="mandatory">*</span><?php endif; ?></td>
        <td class="col_1 col_last"><?php echo $this->generateWithError(); ?></td>
      </tr>
    <?php else: ?>
    <?php if ($this->label): ?> 
     <label for="ctrl_<?php echo $this->id; ?>" class="<?php echo $this->class; ?>"> 
       <span class="capt_lab"><?php echo $this->label; ?></span> 
       <?php if ($this->mandatory): ?><span class="mandatory">*</span><?php endif; ?>:     
      </label> <br /> 
    <?php echo $this->generateWithError(); ?><br />
    <?php endif; ?> 
    <?php endif; ?>
    Da ich kein PHP-Experte bin (und auch nicht werden möchte ), ist für mich nicht erkennbar, ob hier vielleicht der Fehler steckt.

    Würde mich sehr freuen, wenn mal jemand drauf schauen könnte.

    Anwendung findet das ganze z.B. hier: http://www.altendorfer-vorwerk.de/apartment-1.html

    Viele Grüße, Helena

    Nachtrag: Ich sah gerade, dass die tpl-Änderung ja für 2.7 ist und ich 2.8 nutze. Hm. Dann liegt der Fehler sicherlich darin.
    Geändert von jabadoo (06.07.2010 um 15:17 Uhr)

  5. #5
    Contao-Nutzer Avatar von jabadoo
    Registriert seit
    15.08.2009.
    Beiträge
    63

    Gesicht zeigt die Zunge

    Hab gerade probiert, das zur Version 2.8 gehörende Template zu verwenden, allerdings löst das nicht das Problem und der Fehler tritt weiterhin auf....
    Keine gute Usability...

  6. #6
    Contao-Nutzer Avatar von jabadoo
    Registriert seit
    15.08.2009.
    Beiträge
    63

    Frage window.scrollTo funktioniert nicht bei Fehlermeldung im Formular

    Selbst die o.g. Vorgehensweise

    Zitat Zitat von GeorgeDorn Beitrag anzeigen

    Jetzt habe ich mir mit einem Anker beholfen und zwar im Form-Template:

    <<?php echo $this->hl; ?>><a name="formular"><?php echo $this->headline; ?></a>

    und

    <form action="<?php echo $this->action; ?>#formular" …
    funktioniert nicht.
    Die Fehlermeldung wird zwar im Formular angezeigt, da sich dieses Formular aber am Ende der Seite befindet und das automatische Nach-unten-Scrollen bei einer Fehlermeldung nicht funktioniert, sieht der Nutzer nicht, dass er an seinen Angaben im Formular noch etwas ändern muss.

    Ich verwenden nun das ursprüngliche form.tpl der Version 2.8.1 und formatiere lediglich mit CSS. Es kann also nicht mehr am Template liegen.
    Ich bin nun mit meinem Latein am Ende.

    Vielleicht kann jemand aushelfen!? Danke schonmal im Voraus!

    Helena

  7. #7
    Contao-Nutzer Avatar von jabadoo
    Registriert seit
    15.08.2009.
    Beiträge
    63

    HTML [gelöst!]

    Habe den Fehler (?) selbst gefunden.
    Hier im Forum habe ich mal einen guten Beitrag über die Integration von jquery zusätzlich zu mootools gelesen. Dabei wurde dazu geraten, jquery im fe_page.tpl direkt im header aufzurufen. Mir ist immer noch nicht klar, ob das nun richtig oder falsch ist. (z.B. Beitrag 1 und Beitrag 2)

    Nachdem ich diese Zeile jetzt jedenfalls einfach aus dem Header wieder in den Bereich "Eigene Javascript-Code" verschoben habe, hat sich auch die Problematik mit dem nicht funktionierenden window.scrollTo gelöst.
    Und bei einer Fehlermeldung im Formular funktioniert es nun wieder mit dem Sprung zum Formular am Ende der Seite.

  8. #8
    Contao-Nutzer Avatar von theMatrix
    Registriert seit
    19.09.2013.
    Ort
    Frankfurt
    Beiträge
    154

    Standard Contao 3.2.x Formular

    Zitat Zitat von xchs Beitrag anzeigen
    Hallo GeorgeDorn,

    welches Template genau hast Du denn angepasst?

    Eigentlich ist im Template "form.tpl" bereits eine Abfrage eingebaut, welche Dir dann im Fehlerfall an das erste Element mit dem Fehler springt:
    PHP-Code:
    <?php if ($this->hasError): ?>

    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    window.scrollTo(null, ($('<?php echo $this->formId?>').getElement('p.error').getPosition().y - 20));
    //--><!]]>
    </script>
    <?php endif; ?>
    Damit das aber korrekt funktioniert, muss das Formular mit dem Formulargenerator erzeugt worden sein und die Fehlermeldung innerhalb eines <p>-Tags mit CSS-Klasse "error" generiert werden. Falls das nicht der Fall ist bzw. wenn Du hier Änderungen vorgenommen hast, dann müsste man das ggf. anpassen.
    Irgendwie will nicht funktionieren. Ich bekomme die Meldung das getElement keine method hat.

    Hat jemand ne Lösung dafür?????
    Geändert von theMatrix (14.02.2014 um 11:55 Uhr)

  9. #9
    Contao-Fan Avatar von izanagi
    Registriert seit
    19.01.2011.
    Ort
    Köln
    Beiträge
    595

    Standard

    Das hier ist ja Uralt, aber ich bin dennoch auf das selbe Problem bei einer alten 2.11 gestoßen.
    Ich glaube das tritt auf, wenn zuviel Moo und jQuery gleichzeitig genutzt wird.
    Ach und es wird im Ursprungs Script das Form Element ohne # angesprochen, sowie getElement und getPosition nicht funktionieren. Laut Handbuch ist die Funktion anders.
    Vielleicht war das mal eine ältere jQuery Form, keine Ahnung. Ich habe mir folgendes gebastelt was funktioniert:

    PHP-Code:
    (function($) {  
    /* <![CDATA[ */
    try {
     alert("Das Formular wurde nicht korrekt ausgefuellt, bitte korrigieren!");
     window.scrollTo(null, ($('#<?php echo $this->formId?> p.error').position().top - 20));
    } catch(e) {}

    /* ]]> */
    })(jQuery);
    Erweiterungen [district_settings] [district_cloud3d] [district_rating]
    Design,Web,Videos und Games - mediadistrict.de

  10. #10
    Contao-Fan Avatar von herr rilke
    Registriert seit
    29.01.2011.
    Ort
    Münster
    Beiträge
    381

    Standard

    hallo und

    vielen dank allen.

    ich hatte in einer contao 3.5.8 das gleiche problem:

    fehlermeldung wurde nicht nur im <titel> ausgegeben und der fehler war ohne scrollen nicht zu bemerken.
    die lösung noch einmal zusammengefasst:

    im template form.html5:
    PHP-Code:
    <?php if ($this->hasError): ?>

        <script>
         $( document ).ready(function() {   
            (function($) {  
            /* <![CDATA[ */
            try {
             window.scrollTo(null, ($('#<?php echo $this->formId?> p.error').position().top - 60));
            } catch(e) {}
            
            /* ]]> */
            })(jQuery);
          });
        </script>
        
    <?php endif; ?>
    und im CSS (bei tabellen-losen formularen):

    HTML-Code:
    <style>
      .widget.error{
      	border: 1px solid maroon;
    	padding: 1em;
    	background: maroon;
    	color: white;
      }	
      .widget.error p.error{
      	font-weight:bold;
      }
    
    </style>
    HTH

  11. #11
    Contao-Nutzer
    Registriert seit
    08.10.2012.
    Beiträge
    43

    Standard

    Hallo zusammen

    Diese Diskussion ist schon etwas älter, aber ich habe heute das selbe Problem:

    Ich habe auf mehreren Seiten Formulare, die erst nach einigem scrollen weiter unten auf der Seite sitzen. Wenn dort nun Fehler bei der Eingabe vorliegen, landet der Besucher immer wieder oben auf der Seite und es ist nur im Titel ersichtlich, dass ein Eingabefehler vorliegt.
    Gibt es heute für Contao 4.9 einen zeitgemässeren Lösungsansatz?

    Gruss, Golem

  12. #12
    Contao-Nutzer
    Registriert seit
    24.10.2012.
    Beiträge
    26

    Standard

    Hier suche ich gerade auch nach einer Lösung.

    Gruß

  13. #13
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.681
    User beschenken
    Wunschliste

    Standard

    das element hat eine css klasse error - du kannst an die stelle mit dem ersten error-element per javascript scrollen lassen

  14. #14
    Contao-Fan Avatar von Ernestopheles
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Die Klasse "error" wir nur vergeben, wenn das Formular vom Server mit Fehler zurückkommt, nicht aber, wenn das Formular gar nicht erst abgesendet werden konnte. das ist aber der interessante Fall, denn die winzigen Hinweise bei nicht ausgefüllten Pflichtfeldern werden leider gerne übersehen und die Benutzer merken häufig gar nicht, dass etwas schief gegangen ist.
    Ich wünsche mir eine klare Meldung: "Ihr Auftrag wurde erfolgreich entgegen genommen" oder bei Fehler: "Ihr Auftrag konnte nicht entgegen genommen werden. Bitte überprüfen Sie Ihre Eingaben."

    Aber wie realisiere ich das? CSS scheint wegzufallen, da ich keine Auszeichnung erkennen konnte. Template Änderung geht auch nicht, das serverseitig verarbeitet. Hook entsprechend auch nicht.

  15. #15
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.681
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Ernestopheles Beitrag anzeigen
    Die Klasse "error" wir nur vergeben, wenn das Formular vom Server mit Fehler zurückkommt, nicht aber, wenn das Formular gar nicht erst abgesendet werden konnte. das ist aber der interessante Fall, denn die winzigen Hinweise bei nicht ausgefüllten Pflichtfeldern werden leider gerne übersehen und die Benutzer merken häufig gar nicht, dass etwas schief gegangen ist.
    Die Meldung, die du meinst, ist sicher die HTML5-Validierung durch den Browser... an der kannst Du m.E. nicht weiter schrauben... wenn ein Feld einen Error von der Validierung hat, kannst Du das Feld per CSS hervorheben oder musst was mit JS bauen z.B. https://stackoverflow.com/questions/...-it-via-jquery

  16. #16
    Contao-Fan Avatar von Ernestopheles
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von zonky Beitrag anzeigen
    wenn ein Feld einen Error von der Validierung hat, kannst Du das Feld per CSS hervorheben
    Geht das alleine mit css? wenn ja, woran erkenne ich dass ein feld einen error von der validierung hat?

  17. #17

  18. #18
    Contao-Fan Avatar von herr rilke
    Registriert seit
    29.01.2011.
    Ort
    Münster
    Beiträge
    381

    Standard

    steht eigentlich oben:

    # 10

  19. #19
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.681
    User beschenken
    Wunschliste

    Standard

    in #10 wird eine CSS-Klasse angesprochen ".error" - die kommt aber erst nach der Server-Validierung...

  20. #20
    Contao-Fan Avatar von herr rilke
    Registriert seit
    29.01.2011.
    Ort
    Münster
    Beiträge
    381

    Standard

    himmel ... steht ja schon in #14

  21. #21
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.681
    User beschenken
    Wunschliste

    Standard

    eben - Ernestopheles sucht m.E. Selector ":invalid"

  22. #22
    Contao-Fan Avatar von Ernestopheles
    Registriert seit
    25.10.2019.
    Ort
    Hamburg
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard

    CSS:

    HTML-Code:
    /* formular.css */
    
    /* Fehlerdarstellung ändern */
    
    /* nach Rückkehr vom Server bei Fehler: */
    .error {
        background-color:red;
    }
    
    /* bei Validierungsfehler */
    input:invalid {
    	border: 2px solid red !important;
    }
    funktioniert, dennoch wird es weiterhin Benutzer geben, die denken, das Formular ist abgeschickt, weil sie z.B. nicht zum Fehlerfeld hochscrollen (dieses wird durch die Einstellung im Navigationsmodul:
    Fixierte Navigation
    begünstigt.

  23. #23
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.681
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Ernestopheles Beitrag anzeigen
    funktioniert, dennoch wird es weiterhin Benutzer geben, die denken, das Formular ist abgeschickt, weil sie z.B. nicht zum Fehlerfeld hochscrollen (dieses wird durch die Einstellung im Navigationsmodul: begünstigt.
    ich würde meinen, bei der HTML5-Validierung macht das der Browser automatisch - bei der Servervalidierung kannst Du per JS die CSS-Klasse error abfragen und zum ersten Auftreten scrollen (- Höhe-Navibar)

  24. #24
    Contao-Nutzer
    Registriert seit
    24.10.2012.
    Beiträge
    26

    Standard

    Hallo
    in welchem Template und wo muss ich das Formular in Contao 4 mit meinem Anker #kontaktformular ergänzen um bei einer fehlerhaften Eingabe dort hin zu springen?

    Gruß

Aktive Benutzer

Aktive Benutzer

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

Ähnliche Themen

  1. Antworten: 4
    Letzter Beitrag: 24.01.2011, 00:22
  2. Antworten: 11
    Letzter Beitrag: 09.04.2010, 23:25

Lesezeichen

Lesezeichen

Berechtigungen

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