Form-Validierung Nachricht: focus, hover blendet nicht aus

[rakader]

Moin,

in einem Formular gibt ein Script im CMS MODx eine Fehlermeldung aus, wenn dieses Feld nicht ausgefüllt ist. Das Script blendet mit den Klassen invalid und required die Warnmeldung ein. Soweit funktioniert das wunderprächtig.

Wenn nun aber der User das bemängelte Feld ausfüllen will, bleibt die Fehlernachricht bestehen. Somit habe ich mit der Pseudoklasse focus und hover versucht, dieses Feld auf display:none zu stellen.

Da die Fehlernachricht in einem darunterliegenden span enthalten ist, funktioniert das nicht. Da es ein Blockelement ist, funktioniert auch ein negativer text-indent nicht.

Hat jemand eine Idee, wie man das lösen kann?

Hier das HTML am Beispiel Feld Vorname:

<p class="reihe"><label for="name" class="leftLabel">Name: <span>Dieses Feld bitte ausfüllen</span></label>
<input type="text" id="name" name="name" class="arrow" eform="Name::1"/></p>

Hier das CSS:

/* ----- Warnung----- */
.contact .leftLabel span { display:none; }
.contact .leftLabel.invalid span, .contact .leftLabel.required span { display:block; position:absolute; color: #B13700; margin:-13px 0 0 92px; font: bolder 11px helvetica, arial, sans-serif; }

Viele Grüße und herzlichen Dank vorab,
Radulph

[hero-master]

Hi Radulph,
warum willst du denn die Felder ausblenden lasen? Ist doch für die User ein guter Hinweis und stört die User doch gar nicht. MIt :hover und :focus wirst du damit nicht weiterkommen, weil diese ja nur bei Aktionen in Kraft treten und wenn der User dann ein anderes Feld anklickt, dann wird das span und die Nachricht ja in dem anderen Feld wieder angezeigt...
Um dein Vorhaben umzusetzen, müsste man ja während der neuen Eingabe dem span das ".invalid" und ".required" wieder abgewöhnen und es nach der neuen Angabe auch direkt prüfen lassen, so dass es auch weg bleibt. Das geht vlt. mit JS (jQuery vlt.), kann ich mir vorstellen, also eine sofortige Prüfung.

Wenn du es wirklich nur während des neuen Ausfüllens ausgeblendet halten willst, dann kannst du ja dem p-Tag ein :hover geben:

p:hover span { display: none }

[rakader]

Moin Nico - jQuery war das Stichwort! Danke für den Hinweis!

Gelöst mit jQuery und

<script type="text/javascript">
function toggleDetails(elem) { $(elem).parent().children("span#att").toggle(); }
</script>

auf

<p class="reihe"><label for="name" class="leftLabel">Name: <span id="att" onclick="toggleDetails(this);">Dieses Feld bitte ausfüllen</span></label>

Ausblenden deshalb, da die Warnmeldung an der gleichen Position wie die Texteingabe ist.
jQuery ist genial: onClick auf Feld verschwindet Warnnachricht. Füllt man trotzdem nicht aus, ist sie wieder da.

Hattest recht: Mit hover und focus war ich auf dem Holzweg.

Viele Grüße
Radulph