Kontaktformular, Error-Meldungen verschieben Design

Hallo zusammen,

ich habe ein Kontaktformular aufgebaut, welches auch einwandfrei funktioniert und konnte für das nachfolgende Problem noch keine Lösung finden.
Dieses Formular hat ein zweireihiges Design, links sind die Pflichtfelder und rechts ohne Pflichtfelder. Wenn nun eine Fehleingabe getätigt oder ein Pflichtfeld nicht ausgefüllt wurde erscheint ja beim jeweiligen Feld eine Fehlermeldung, was auch soweit richtig dargestellt wird. Nur auf der rechten Seite ist nun das Eingabefeld verschoben, es ist dann auf der gleichen Höhe wie die Fehlermeldung vom betreffenden Eingabefeld links. Gibt es dafür eine Möglichkeit oder Methode vielleicht per CSS das Feld ohne der Pflichteingabe um die Höhe der Fehlermeldung nach unten zu verschieben? Hat jemand einen guten Tipp wie man dies lösen könnte. Könnte man z.B. eine CSS-Klasse mit einer anderen CSS-Klasse um einen Style zu erweitern?
Danke!


Gruß
Thomas

Hallo Thomas,
das ist sicher einfach eine 'Aufgabe' für CSS. Mit großer Wahrscheinlichkeit musst du keine Klasse hinzufügen.
Kannst du einen Link zu dem Formular posten, damit man das auf deiner Seite mal ausprobieren kann?

Gruß, folkfreund

Danke für die Rückmeldung.
Anbei der Link zu der betreffenden Seite http://sub.musikverein-hirschzell.de/kontakt.html. Die Seite ist derzeit noch im Aufbau und deshalb auch nicht ganz fertig.

Gruß
Thomas

Hallo Thomas,

vermutlich hast du die Option „HTML5-Validierung deaktivieren” aktiviert…?
Dann werden die Fehler im Feld angezeigt bzw. in einem Overlay und dann verschiebt es nichts.

Trotz HTML5 Validierung kann es aber sein, dass ein Feld dann vom Server als nicht gültig erkannt wird - dann hat man das Problem wieder. Das CSS sollte man also auf jeden Fall so anpassen, dass die Fehlermeldungen vom Server richtig angezeigt werden.

Danke für die Infos, aber ich glaube, dass es noch nicht ganz klar ist was ich eigentlich erreichen möchte.
Zu meiner Seite: Dort gibt es z.B. im Kontaktformular links ein Eingabefeld als Pflichtfeld mit der Bezeichnung "Nachname" und rechts ein Feld das kein Pflichtfeld ist mit der Bezeichnung "Telefonnummer".
Was soll geschehen: Wenn das Feld "Nachname" eine Fehlermeldung hat dann soll das Feld "Telefonnummer" ein margin-top:27px; erhalten und wenn das Feld "Nachname" keine Fehlermeldung hat dann soll das Feld "Telefonnummer" auch kein margin erhalten.
Ist dies in irgendeiner Weise per CSS oder einer anderen Methode umzusetzen?

Gruß
Thomas