✔ Kontaktformular Warnung nach Ausgabe bei Klick ausblenden

[rakader]

Hallo,

gegeben ist ein Label-Tag, indem in ein span-Tag von einem Script im CMS MODx beim Nichtausfüllen eine Warnmeldung ausgegeben wird. Die Warnung erscheint an gleicher Stelle wie der Texteintrag. Die Warnmeldung wird mit den Klassen required und invalid gesteuert.

Klickt der User nun auf das Textfeld, um den geforderten Eintrag zu machen, bleibt die Warnung stehen. Zwei Sätze werden also übereinander geschrieben. Das sieht unleserlich aus.

Ich versuche nunmehr per Klick auf die Warnmeldung diese auszublenden.
Mit focus, hover, visited gelingt dies aber nur, solange ich geklickt habe. Lasse ich die Maus los, ist die Warnmeldung wieder da.

Wie schaffe ich es, diese bei Klick endgültig auszublenden?

Das HTML sieht so aus (der Tag eform aktiviert das Skript, der span ist nur zu sehen, wenn das Feld nicht ausgefüllt ist):

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

Das dazugehörige CSS sieht so aus:

/* ----- Warnung----- */
/*.contact #nachricht div { width:300px; margin:0 0 0 110px; } */
.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; }

Vielen Dank vorab für Eure Anregungen,

Radulph

 

[Maik]

Moin.

Ich versuche nunmehr per Klick auf die Warnmeldung diese auszublenden.
Mit focus, hover, visited gelingt dies aber nur, solange ich geklickt habe. Lasse ich die Maus los, ist die Warnmeldung wieder da.

Wie schaffe ich es, diese bei Klick endgültig auszublenden?

Mit CSS kommst du da nicht weiter, und mußt dir Javascript zu Hilfe holen.

Hier ist der Hinweis direkt im Eingabefeld eingetragen, und wird entfernt, wenn das Element den Fokus erhält; sollte vom Nutzer darin nichts eingetragen werden, und das Element den Fokus verlieren, erscheint der Hinweis wieder:

<input type="text" value="foobar" onfocus="if(this.value=='foobar') this.value=''" onblur="if(this.value=='')this.value='foobar'" />

mfg Maik

 

[rakader]

Maik, Du bist der Held. Eine Deiner Antworten hier hatte mich mit jQuery auf den Weg gebracht:

Hab es mit toggle gelöst.

Danke nochmals,

Radulph