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

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.

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.

Hallo Community!

Habe gleiches Problem wie oben bereits beschrieben:

Zitat:

---

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.

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... :(

Selbst die o.g. Vorgehensweise

Zitat:

---

Zitat von GeorgeDorn

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

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.

Zitat:

---

Zitat von xchs

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

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);

---

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

Hallo zusammen

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

Zitat:

---

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

Hier suche ich gerade auch nach einer Lösung.

Gruß

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

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.

Zitat:

---

Zitat von Ernestopheles

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

Zitat:

---

Zitat von zonky

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?

am Selector :D

https://www.google.com/search?client...ss+html5+error

steht eigentlich oben:

# 10

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

himmel ... steht ja schon in #14 :rolleyes:

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

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:

Zitat:

---

Fixierte Navigation

---

begünstigt.

Zitat:

---

Zitat von Ernestopheles

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)

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ß