Fehlermeldung in Formularen gestalten

[anonymous_möchtegern]

Hallo, liebe Javascript-Gemeinde,

schon wieder ich und schon wieder steh ich vor einem bestimmt ganz simplen Einzeiler, den ich nich auf die Reihe kriege.

Wie mache ich es, dass um ein Formularfeld, dass leergelassen wurde, aber ausgefüllt werden muss, ein roter Rahmen entsteht?

Also, ich klicke auf den Button und erhalte die Fehlermeldung, dass "feld1"zB ausgefüllt werden muss und dieses "feld1" soll dann auch einen roten Rahmen haben.

Bitte hierbei um Hilfe.

[Siri]

Hallo,

Also, ich klicke auf den Button und erhalte die Fehlermeldung, dass "feld1"zB ausgefüllt werden muss und dieses "feld1" soll dann auch einen roten Rahmen haben.

An der Stelle in deinem JS weißt du dem entsprechenden Feld eine Klasse zu, in der die rote Umrahmung für Felder definiert ist.

Viele Grüße
Siri

[Matthias Apsel]

Ergänzung

An der Stelle in deinem JS weißt du dem entsprechenden Feld eine Klasse zu, in der die rote Umrahmung für Felder definiert ist[...]

... die du vor der (erneuten) Überprüfung (wieder) entfernen musst.

Matthias

[Siri]

Hallo,

An der Stelle in deinem JS weißt du dem entsprechenden Feld eine Klasse zu, in der die rote Umrahmung für Felder definiert ist[...]

... die du vor der (erneuten) Überprüfung (wieder) entfernen musst.

Jetzt wollte ich dem OP die Chance geben, da selbst drauf zu kommen :-)

Viele Grüße
Siri

[misterunknown]

Moin,

An der Stelle in deinem JS weißt du dem entsprechenden Feld eine Klasse zu, in der die rote Umrahmung für Felder definiert ist.

Je nach Anwendungsfall kann man eventuell auch die Pseudoklasse :invalid nutzen.
Grüße Marco

[Siri]

Hallo,

Je nach Anwendungsfall kann man eventuell auch die Pseudoklasse :invalid nutzen.
Grüße Marco

Hmmm, das ist ja eine merkwürdige Pseudoklasse... Das Feld selbst/CSS weiß ja nicht ob es invalid ist, d.h. es kann nicht dynamisch reagieren, sondern erst, wenn ich es entsprechend mit JS zuweise. Oder seh ich das falsch?

Viele Grüße
Siri

[misterunknown]

Moin,

Hmmm, das ist ja eine merkwürdige Pseudoklasse... Das Feld selbst/CSS weiß ja nicht ob es invalid ist, d.h. es kann nicht dynamisch reagieren, sondern erst, wenn ich es entsprechend mit JS zuweise. Oder seh ich das falsch?

Doch, in HTML5 weiß das Feld ob es valide ist oder nicht. So habe ich das zumindest verstanden.
Es ist aber sicherlich möglich auch eigene Javascript-Funktionen zur Validierung zu nutzen.

Grüße Marco

[misterunknown]

Moin,

Es ist aber sicherlich möglich auch eigene Javascript-Funktionen zur Validierung zu nutzen.

Interessant dazu auch das Pattern-Attribut.

Grüße Marco

[Siri]

Hallo,

Doch, in HTML5 weiß das Feld ob es valide ist oder nicht. So habe ich das zumindest verstanden.

Interessant! D.h. aber auch, dass ein Feld beim ersten Aufruf der Seite schon als invalid gekennzeichnet sein kann, weil womöglich ein Wert fehlt. Das wäre dann etwas irritierend, wenn ich schon Fehler habe, bevor ich überhaupt was ausgefüllt hab...

Viele Grüße
Siri

[misterunknown]

Moin,

D.h. aber auch, dass ein Feld beim ersten Aufruf der Seite schon als invalid gekennzeichnet sein kann, weil womöglich ein Wert fehlt. Das wäre dann etwas irritierend, wenn ich schon Fehler habe, bevor ich überhaupt was ausgefüllt hab...

Das stimmt. Man könnte es in dem Fall umgekehrt machen und nicht die invaliden Felder rot markieren, sondern die validen Felder grün. Oder man gibt beim Absenden dem Form eine Klasse, mit der dann die Felder gestylt werden können:

form.triedToSubmit input:invalid { background-color: #F44; }  

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, Siri!

Interessant! D.h. aber auch, dass ein Feld beim ersten Aufruf der Seite schon als invalid gekennzeichnet sein kann, weil womöglich ein Wert fehlt. Das wäre dann etwas irritierend, wenn ich schon Fehler habe, bevor ich überhaupt was ausgefüllt hab...

Das ließe sich wieder über eine Klasse regeln. Etwa, wenn du dem Form-Element die Klasse "geprüft" zuweist.

.geprüft :invalid {
}

dann im CSS.

Matthias

[Felix Riesterer]

Lieber misterunknown,

die Pseudoklasse :invalid nutzen.

dann aber auch noch einen Link zum "nutzen" dazu!

Liebe Grüße,

Felix Riesterer.

[misterunknown]

Moin,

dann aber auch noch einen Link zum "nutzen" dazu!

Ok. Oder vielleicht auch sowas, dann kann man direkt drin rumschreiben ;)

Grüße Marco

[molily]

Hallo,

Oder vielleicht auch sowas, dann kann man direkt drin rumschreiben ;)

Das Feld ist schon invalid, wenn ich noch gar nichts hineingeschrieben habe. Das ergibt technisch Sinn – hinsichtlich der Usability ist das eine Katastrophe. Wenn der Nutzer das Formular öffnet, sind sämtliche Felder rot!

Dann doch lieber eine sinnvolle JavaScript-Lösung.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Das Feld ist schon invalid, wenn ich noch gar nichts hineingeschrieben habe. Das ergibt technisch Sinn – hinsichtlich der Usability ist das eine Katastrophe. Wenn der Nutzer das Formular öffnet, sind sämtliche Felder rot!

Mozilla hat das bedacht: :-moz-ui-invalid.

Wie sieht’s bei den anderen aus? Bis in [CSS-UI] hat es das (noch?) nicht geschafft.

Qapla'

[anonymous_möchtegern]

nach einigen herumspielen bin ich nun bei diesem Codeschnippsel gelandet

  
<input type="number" name="frame" value="0/0" size="7" maxlength="7" onfocus="if(this.value=="")this.style.border='1px solid red'"/>  
  
  

nur funktioniert das nicht so recht. wo genau, liegt mein Denkfehler??

[Siri]

Hallo,

nur funktioniert das nicht so recht

Was funktioniert nicht? Was hast du bei onfocus erwartet? Warum hast du das Script im Tag plaziert?

Viele Grüße
Siri

[anonymous_möchtegern]

Hallo,

nur funktioniert das nicht so recht

Was funktioniert nicht? Was hast du bei onfocus erwartet? Warum hast du das Script im Tag plaziert?

Viele Grüße
Siri

Soo, jetzt funktioniert alles, wie erwartet.. wusste ichs doch, dass es ein ganz simpler Einzeiler ist xD

gelöst mit eben onfocus, einem if (sofern das Feld leer) und Anweisungen für diesen Fall.

Danke für die Hilfe auch wegen den Tipps bezüglich HTML5. Ich würde auch lieber bereits überall mit HTML5 arbeiten, aber leider ist da in meiner Firma noch kein standard

[Matthias Apsel]

Om nah hoo pez nyeetz, anonymous_möchtegern!

Danke für die Hilfe auch wegen den Tipps bezüglich HTML5. Ich würde auch lieber bereits überall mit HTML5 arbeiten, aber leider ist da in meiner Firma noch kein standard

onfocus im Tag zu notieren ist auch keine gute Idee. Das Validierungs-Script setzt sicher den Focus dahin. Was, wenn mehrere Felder betroffen sind? Warum soll der User sie alle einzeln abarbeiten müssen?

Matthias

[Siri]

Hallo,

onfocus im Tag zu notieren ist auch keine gute Idee. Das Validierungs-Script setzt sicher den Focus dahin. Was, wenn mehrere Felder betroffen sind? Warum soll der User sie alle einzeln abarbeiten müssen?

onfocus scheint mir für den Fall generell eine schlechte Idee, egal wo. Der User klickt das Feld an, um eine Eingabe zu machen, das Feld ist leer -> Fehlermeldung! Häää?

Der User macht keine Eingabe, geht zum nächsten Feld und bekommt beim Verlassen keine Fehlermeldung... Was soll das bringen?

Viele Grüße
Siri

[Der Martin]

Hi,

onfocus scheint mir für den Fall generell eine schlechte Idee, egal wo. Der User klickt das Feld an, um eine Eingabe zu machen, das Feld ist leer -> Fehlermeldung! Häää?
Der User macht keine Eingabe, geht zum nächsten Feld und bekommt beim Verlassen keine Fehlermeldung... Was soll das bringen?

Verwirrung. ;-)

Meiner Ansicht nach sollte eine Eingabevalidierung erst beim Absenden des Formulars meckern. Vorher ist die Eingabe ja noch nicht vollständig, die Wahrscheinlichkeit, dass sie ungültig ist, ist also sehr hoch.

Ciao,
 Martin