Formular-Error-Message positionieren?

[comanche]

Hallo,

als Anfänger ohne PHP-Kenntnisse würde mich folgendes interessieren:

Beim Absenden eines Formulars mit nicht ausgefüllten Pflichtfeldern erscheint zwischen Label und Input die Fehlermeldung "Bitte füllen Sie das Feld "feldbezeichnung" aus!". Beispiel:

<p class="error">Bitte füllen Sie das Feld "Straße:*" aus!</p>

Dieser Text zerstört leider mein Formularlayout. Wie könnte ich erreichen, dass an einer von mir definierten Stelle im Formularlayout diese Meldungen (z.B. untereinander) ausgegeben werden?

Gruß,
Andreas

[tognit]

Hallo comanche

Das könntest du ja über das css positionieren. Du hast ja eine error klasse.

Bei mir kommt die Meldung oberhalb des label und input.

strong.message {
width: 100%;
float: left%;
}

Kommt natürlich auf dein eigenes Layout an.

Gruss

[comanche]

Hallo comanche

Das könntest du ja über das css positionieren. Du hast ja eine error klasse.

Bei mir kommt die Meldung oberhalb des label und input.

strong.message {
width: 100%;
float: left%;
}

Kommt natürlich auf dein eigenes Layout an.

Gruss

Hallo tognit,

danke für die Antwort!
Ok, dann muss ich da per CSS ran. "Zwischen Label und Input" bezog sich auf den Quelltext. Da ich schon Label und Input per float:left positioniert habe wird es vermutlich schwer den dazwischen erscheinenden Absatz zu positionieren. Ich wurschtel nochmal daran rum ...

Danke und Grüße,
Andreas

[comanche]

Also, das Positionieren der Fehlermeldung geht nicht so einfach. Die Klasse "error" wird ebenso der Feldbezeichnung und dem Inputfield zugewiesen. Dadurch ist es einfach möglich, die Farbe der Feldbezeichnung zu ändern, sobald ein Inputfield nicht ausgefüllt wurde. Deshalb eine neue Frage:

Wie kann ich die Ausgabe der Meldung

<p class="error">Bitte füllen Sie das Feld "XXXX:*" aus!</p>

komplett unterdrücken? Für Tipps wäre ich dankbar!

Gruß,
Andreas

[tognit]

Hallo Andreas

Klassen kannst Du ja auch mehrmals verwenden und wenn Du sie genau auf ein Objekt beschränken möchtest, dann kannst Du das z.B. mit "p.error" lösen.

Wie ich in meiner ersten Antwort geschrieben habe, funktioniert es. Es wäre auch interessant wie und wo die Meldung bei Dir erscheinen soll.

Was möchtest du unterdrücken? Die Fehlermeldung? Wenn Du nur das Feld z.B. Rot haben möchtest, kannst Du ja über CSS die klasse

p.error {visibility: hidden;}

oder auch mit dieser klasse

strong.message {visibility: hidden;}

Gruss
Steven

[comanche]

Hallo Steven,

danke für den Tipp! Ich kann die Meldung mit p.error gezielt ansprechen und unsichtbar machen, aber es zerstört mir trotzdem mein Layout. Lediglich die Größe des unsichtbaren Absatzes auf 1x1 Pixel setzen würde gehen, wenn dann nicht 1 Pixel verschiebung sichtbar wäre. Zugegeben, das wäre nicht schlimm. Da ich den Text so oder so unsichtbar mache, habe ich ihn per absoluter Positionierung in den Weltall geschickt

So sieht's jetzt aus

Danke für Deine Geduld.

Grüße,
Andreas

[Thomas]

Ich sehe da gerade kein eindeutiges Problem, da nur die Lables eingefärbt werden.
Sicherlich auch so gewollt.

Du kannst die <p></p> Definition im Template auch durch DIVs ersetzen, eine ID vergeben und so an jede Stelle positionieren.

Dort kannst Du ebenfalls die Fehlerausgabe entfernen und erzeugst so keinen überschüßigen Code, dessen Ausgabe Du nur mit CSS versteckst.
Generiert wird sie ja dennoch.

[comanche]

Ich sehe da gerade kein eindeutiges Problem, da nur die Lables eingefärbt werden.
Sicherlich auch so gewollt.

Du kannst die <p></p> Definition im Template auch durch DIVs ersetzen, eine ID vergeben und so an jede Stelle positionieren.

Dort kannst Du ebenfalls die Fehlerausgabe entfernen und erzeugst so keinen überschüßigen Code, dessen Ausgabe Du nur mit CSS versteckst.
Generiert wird sie ja dennoch.

Hallo Thomas,

ja, das mit den Labels ist so gewollt und so werde ich es auch (vorerst) belassen.

Ich habe schon in den Formular-Templates nachgeschaut, aber es ist mir nicht gelungen die Generierung zu unterdrücken. Wenn Du mir diesbezüglich einen Hinweis geben kannst, dann wäre dies natürlich die sauberste Lösung. Jetzt wo ich darüber nachdenke: Im Template könnte man doch sicher über eine Bedingung festlegen, dass beispielsweise ÜBER den generierten Formularfeldern ein Text "Bitte füllen Sie die fabig gekennzeichneten Felder aus" o.ä. erscheint ... ?

Grüße,
Andreas

[Thomas]

Ich meine im form.tpl mußt Du nur den Codeschnipsel

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

entfernen.

Testen kann ichs leider gerade nicht, aber Du kannst es ja mal probieren.

[stefan-at-work]

Ich meine im form.tpl mußt Du nur den Codeschnipsel entfernen.

lieber auskommentieren, vielleicht braucht man ihn noch...

[Thomas]

Stimmt!

Die form.tpl kann man ja nicht auswählen, wenn man einfach die Bezeichnung ändert.
Oder habe ich da eine Möglichkeit übersehen?

[comanche]

Der Code-Abschnitt in form.tpl ist leider nicht für die Ausgabe zuständig (wenn ich es richtig interpretiere lediglich um zum entsprechenden Feld zu scrollen). Das hatte ich alles schon durchgespielt. Also bleibt momentan nur die Positionierung der Meldungen außerhalb des sichtbaren Bereichs.

Die form.tpl habe ich nun folgendermaßen geändert:

<?php if ($this->hasError): ?>
<p class="hinweis">Bitte füllen Sie die farbig gekennzeichneten Felder aus:</p>
<?php endif; ?>

<?php echo $this->fields; ?>

Beispielseite: http://typo.megerle.com/kontaktformular.html

Falls noch jemand eine Lösung hat, wie man die Ausgabe ganz unterdrücken kann, dann bitte melden.

Vielen Dank schonmal an alle Beteiligten!

Gruß,
Andreas

[Nelly]

Hab mir Deine Lösung angeschaut und finde sie genial. Deshalb wollte ich das nachbauen, aber bei mir wird kein Text über den Formfeldern angezeigt. Vielleicht kannst Du mir helfen?

Meine form.tpl schaut so aus:

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> <?php echo $this->tableless ? 'tableless' : 'tableform'; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<form action="<?php echo $this->action; ?>" id="<?php echo $this->formId; ?>" method="<?php echo $this->method; ?>" enctype="<?php echo $this->enctype; ?>"<?php echo $this->attributes; ?>>
<div class="formbody">
<?php if ($this->method != 'get'): ?>
<input type="hidden" name="FORM_SUBMIT" value="<?php echo $this->formSubmit; ?>" />
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $this->maxFileSize; ?>" />
<?php endif; ?>
<?php echo $this->hidden; ?>
<?php if (!$this->tableless): ?>
<table cellspacing="0" cellpadding="0" summary="Form fields">
<?php if ($this->hasError): ?>
<p class="hinweis">Bitte füllen Sie die farbig gekennzeichneten Felder aus:</p>
<?php endif; ?>

<?php echo $this->fields; ?>
</table>
<?php else: echo $this->fields; endif; ?>
</div>
</form>
<?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; ?>

</div>
<!-- indexer::continue -->

Hast Du vielleicht die form_widget.tpl auch angepasst?

Gruß,
Nelly

[Nebu]

Komplette Meldung Ausblenden:

p.error {
    display:none;
}

[Jens Pielawa]

Mit meinem Formular habe ich ein anderes kleines Problem: die Fehlermeldung beim Login z. B. ist durchformatiert, bei mir so:

p.error
{
    margin-bottom:6px;
    padding:2px 4px;
    text-align:left;
    border:1px solid #f00;
    font-weight:bold;
    font-size:11px;
    color:#f00;
}

Nirgendwo steht etwas von anderen Positionsangaben, und trotzdem wird bei einem Login-Fehler jedesmal die Meldung um 66 Pixel nach rechts gerückt platziert und dann auch noch dummerweise abgeschnitten. Siehe:


Woran das liegt, weiß ich nicht, ich habe auch schon testweise den Code

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.scrollTo(null, ($('tl_login').getElement('p.error').getPosition().y - 20));
//--><!]]>
</script>

mal aus der form.tpl entfernt, aber das hilft nichts. Was bewirkt dieses merkwürdige Einrücken, wie kann ich das wieder bündig bekommen?

[xchs]

Nirgendwo steht etwas von anderen Positionsangaben, und trotzdem wird bei einem Login-Fehler jedesmal die Meldung um 66 Pixel nach rechts gerückt platziert und dann auch noch dummerweise abgeschnitten.

Doch, das steht in Deinem Stylesheet "modules.css". Schau Dir mal dort den Selektor ".mod_login p.error" an und entferne dort das "left:26%;"

[Jens Pielawa]

Ah ja, danke, das hat geholfen.
Aber: warum muss sowas in einem (ehemaligen) Kauftemplate an zwei verschiedenen Stellen definiert werden?...

[xchs]

Aber: warum muss sowas in einem (ehemaligen) Kauftemplate an zwei verschiedenen Stellen definiert werden?...

Die anderen Definitionen in der "form.css" beziehen sich wohl auf "normale" Formulare...

[stomfohrde]

Hallo zusammen,

ich habe mehr oder weniger das gleiche Problem.
Egal was ich an Css-Regeln oder Klassen eingebe, die Error-Meldungen reagieren nicht auf meinen Code.
Analysieren kann ich es leider auch nicht mit dem Browser da die Meldung im Formular immer verschwindet, wenn ich irgendwo hin klicke.

Auch finde ich form.tpl nicht sondern nur form.html5 und das xhtml. Hier werde ich aber nicht schlau bzw. finde ich auch nicht die erwähnten Php-Schnipsel.
Auch eine Durchsuchung diverser anderer Templates hat mir keinen Erfolg bzw. die Error-Php-Codes zum erscheinen gebracht.

Mein Problem ist, dass die Warnungen (abgesehen vom Login-Form) dort landen, wo sie nicht hin gehören.
Wer sich gerne selbst einen Überblick verschaffen möchte: http://beringer-consulting.de/regan.html

Danke im Voraus und erholsame Feiertage

[mlweb]

Seit dem letzten Beitrag (2010) und dem heutigen Tag ist Contao Gott sei Dank nicht stehen geblieben. Template mit der Endung .tpl sind überholt, Templates mit Endung .xhtml werden für XHTML-Seiten verwendet und Templates mit Endung .html5 für HTML5-Seiten. Letzteres sollte heutzutage auf jeden Fall bei neuen Websites Standard sein.
Ich habe mir jetzt nicht den ganzen Thread durchgelesen, aber ich halte es für absolut nicht unnormal, dass die Lösungen von damals heute nicht mehr funktionieren.
Für mich sieht die Fehlerbehandlung im Formular auf der von Dir verlinkten Seite erst einmal normal aus - ganz normale HTML5-Technik (http://t3n.de/news/html5-pflichtfelder-360171/)
Vielleicht erzählst Du uns was Dich stört bzw. was Du gern hättest.

Edit: Link hinzugefügt.

[stomfohrde]

Tut mir leid, dass ich so unpräzise war, vor lauter frust habe ich den eigentlichen Inhalt etwas zu kurz kommen lassen.

In Chrome sind die Füllen Sie bitte dieses Feld aus-Meldungen bei dem Registrierungsformular überall im Browser verteilt, aber nicht an das Textfeld geheftet, wo sie eigentlich hin gehören.
Ein Kollege hat im FF das Problem, dass sich diese Meldung über den ganzen Bildschirm (1920px) streckt und das, obwohl es der Inhalt gar nicht benötigt.

Ich hab jetzt auch mal eine Screen-Shot gemacht. Ich würde gerne diese Meldung stylen und verschieben können, oder zu mindest verschwinden lassen, da das Textfeld ja selbst auch rot wird.
Verschwinden lassen halte ich nämlich immer noch für besser als eine Meldung, die irgendwo im Nirvana auftaucht.

Danke vorab.

Gruß Sven

EDIT: Ich glaube das Ding heißt Tooltip
EDIT 2: Ich hab jetzt noch ein paar Artikel zum Thema Tooltip gelesen die mich zwar nicht wirklich weiter gebracht haben, aber kann es sein, dass die ToolTips auf den "Mist" vom Browser gewachsen sind und somit von mir/css gar nicht beeinflusst werden können?

[mlweb]

Wenn man solche Fehler genauer untersuchen will, müsste man schon wissen bei welchem Browser unter welchen Umständen genau was passiert.
In ein paar Tests habe ich in Firefox und Chrome keine Unregelmäßigkeiten festgestellt.
Die Ausgabe selbst ist die in HTML5 implementierte Ausgabe. Wenn Du nichts selbst gestyled hast, werden die browsereigenen Styles verwendet.
Hier mal ein paar Links wo Du Ansätze zum Stylen findest
https://www.drweb.de/magazin/formula...tml5-und-css3/
https://wiki.selfhtml.org/wiki/HTML/...von_Formularen
http://www.mm-newmedia.de/2014/09/fo...ss3-erstellen/
Die Hinweise im Fehlerfall weglassen, das würde ich persönlich nicht tun, denn die Validierung reagiert ja nicht nur auf leere Felder sondern auch auf Fehleingaben. Das machen Hinweise dann doch deutlicher.

Kleiner Hinweis am Rande: Ich würde heutzutage keine Formulare mehr mit Tabellen aufbauen.

Nachtrag: Auch Tooltips jeglicher Art kann man selbst gestalten.

[Andreas]

Im Allgemeinen gefällt mir das CSS nicht. Für meinen Geschmack zu viel Margins und Position-absolute zum Positionieren von Elementen benutzt. Und wie @mlweb sagt, mache besser ein Fomular ohne Tabelle.

Obwohl auch ich da keine Fehler sehe, außer dass die Fehlermeldung beim Login über dem Input liegt, sodass man dort dann nicht mehr dran kommt, fällt mir auf, dass sich die Tabelle über die komplette Seitenbreite erstreckt und das Login mit position:absolute dort einfach drüber gelegt wurde. Damit sich die Inputs nicht auch auf 100% erstrecken sind sie in der Breite beschränkt worden.

[Marchie]

Hallo zusammen,

ich will den Thread nochmals aufrollen, denn eine Lösung scheint nicht gefunden. Ich habe dasselbe Problem - siehe Screen anbei.
fehlermeldungen_formulare.jpg

Die Fehlermeldung liegt über der Navi. Am zugehörigen Feld zwar, aber ich würde es gerne anders positionieren. Das gelingt mir nicht, weder mit CSS nocht per Javascript. Ich habe dazu folgenden Thread auf Github gefunden https://github.com/contao/core/issues/7765 und all das probiert: leider erfolglos.

Per CSS konnte ich das Ding auch nicht ansprechen, nicht mal ausblenden mittels .ce_form .error { display:none; } - also muss es anders heißen. Aber untersuchehn kann man es auch nicht, da es immer wegspringt, wenn man die Entwicklertools nimmt. Ich verwende das Notification Center. Kann es daran liegen?

Hat noch jemand einen Ansatz?

Danke schon mal und viele Grüße Marion

[cliffparnitzky]

In deinem Fall ist HTML5 Validierung noch aktiv. Die Fehlermeldungen dazu kommen vom Browser direkt und sind m.W.n. nicht stylebar.

Deaktiviere mal die HTML5 Validierung in den Formulareinstellungen und schau dir das ganze dann erneut an.

Gruß, Cliff

[Andreas]

Das hatten wir gerade erst diese Woche. Siehe hier https://community.contao.org/de/show...pringt-zu-hoch

[Marchie]

Danke euch beide für eure Antworten!

1.) der erste Ansatz mit dem deaktivieren der HTML5 Validierung entfernt mir zwar die Fehlermeldung, aber dann kommt auch einfach gar kein Hinweis wenn ein Feld vergessen wurde. Das Formular wird nicht versendet, keine Feedbackseite öffnet sich, der User weiß somit nicht was und ob was passiert ist.

2.) der zweite Ansatz mit dem JS scheint wohl die Lösung zu bringen, aber ich bin hier sehr unsicher welches Javascript ich nun genau verwenden kann / soll und wohin das muss.... hast du mir hier noch eine kleine Hilfe? Lieben Dank :-)

[Marchie]

ICH HAB'S :-)
Also nochmals für alle:
Einfach diesen Javascript-Snippet einbinden, dann sitzt die Fehlermeldung an der richtigen Stelle :

//  Fehlermeldung Formular korrekt positionieren
	var delay = 0;
	var offset = 100;
	document.addEventListener('invalid', function(e){
	   	$(e.target).addClass("invalid");
		$('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - offset }, delay);
	}, true);
	document.addEventListener('change', function(e){
   		$(e.target).removeClass("invalid")
	}, true);

nochmals danke für die Helfer von oben!!

[Andreas]

1.) der erste Ansatz mit dem deaktivieren der HTML5 Validierung entfernt mir zwar die Fehlermeldung, aber dann kommt auch einfach gar kein Hinweis wenn ein Feld vergessen wurde. Das Formular wird nicht versendet, keine Feedbackseite öffnet sich, der User weiß somit nicht was und ob was passiert ist.

Dann stimmt da irgendetwas nicht. Wenn der Browser nicht direkt beim Client validiert, muss auf jeden Fall Contao validieren und das Formular erneut anzeigen, mit Fehlermeldungen auf den falsch ausgefüllten Feldern. Sieh dir das mal in der Online-Demo mit dem Kontaktformular an. Vorher im Formular die HTML5 Validierung ausschalten.

Schön, dass du eine Lösung gefunden hast. In dem Thread bei stackoverflow gibt es mehrere Ansätze, die auch funktionieren.

[Marchie]

Mmmmmh, ich finde auf dem FE das Kontaktformualar auf der Demo gar nicht. Bin ich blöd??? Im BE hab ich es gesehen, dass die HTML5 Validierung ausgeschalten ist. So hab ich das auch versucht. Wäre mir im Prinzip auch lieber, wenn Contao validieren würde, aber es geht bei mir definitiv nicht - seltsam!!

Bei den Javascripten, war das gewählte Beispiel für mich am einfachsten :-)

[miniA4kuser]

Dann läuft bei deinem Contao irgendwas total schief.

HTML5-Validierung und JavaScript(-Validierung) sind Klientseitige (Webbrowser) Maßnahmen und haben erst einmal mit Contao nichts zu tun.

Contao läuft ja auf deinem Webserver und daher macht Contao die Validierung wenn deine Daten von dem Formular an den Server gesendet werden (Submit form). Weiß nur nicht ob Contao da noch zwischen GET- und POST-Methodik beider Validierung unterscheidet.

[Andreas]

Mmmmmh, ich finde auf dem FE das Kontaktformualar auf der Demo gar nicht.

Sorry, das ist hier https://demo.contao.org/en/applications.html

[Marchie]

Danke auch nochmals euch beiden, wieder was gelernt!!

Jetzt habe ich alles eroiert und kann sagen:

1. auf der Demo war wohl der Menüpunkt Applications gelöscht :-) jetzt habe ich das Formualr gefunden und verglichen.

2. ja es tat wirklich nicht. Hab hin und her probiert aber jetzt mal Cache gelöscht und siehe da ..... irgendwas war verklemmt. Jetzt tut's sowohl über den Browser (HTML5 Validierung) als auch, wenn deaktiviert über Contao.

[Andreas]

Sehr gut.

Contao validiert übrigens auf jeden Fall das was gesendet wird. Die Clientseitige Validierung ist nur ein erster Filter, damit spart man sich das Absenden des Formulars.

Hast du eine Cachezeit auf den Seiten eingestellt? Wenn ja, dann würde ich das für diese Seite mal ausschalten.

[Marchie]

ich schau mal, meine aber nicht ..... Aber da grade an allen Ecken an der Seite gearbeitet wird ;-) ....