Beim verlassen grün markieren

[Komme nicht weiter]

Wie kann ich das machen, wenn ich in einem Imputfeld und Textfeld etwas geschrieben habe, dass es dann grün wird? Ich schreibe etwas, gehe dann ins nächste Feld und das verlassene Feld wird grün. Gibt es was fertiges?

[M.]

Mahlzeit,

Gibt es was fertiges?

Ja. Heisst Javascript und wird seit vielen Jahren von Browsern verstanden.

[Gunnar Bittersmann]

@@M.:

nuqneH

Ja. Heisst Javascript und wird seit vielen Jahren von Browsern verstanden.

… aber wird seit vielen Jahren von Entwicklern nicht verstanden.

Qapla'

[1UnitedPower]

Meine Herren!

Gibt es was fertiges?

Du hast bestimmt vor das Eingabe-Feld zu validieren oder? Also zu prüfen, ob der Eingabetext plausibel ist. Ein Email-Feld ohne @-Zeichen ist mit Sicherheit fehlerhaft ausgefüllt, das soll dann vermutlich rot werden?

HTML bringt eine Reihe an Validierungs-Methoden von Haus aus mit. Man kann zum Beispiel sagen, dass ein Feld ein Pflichtfeld ist, oder dass es eine Zahl beinhalten soll, sogar dass es eine Zahl zwischen 10 und 20 enthalten soll. In genau dieser Reihenfolge, würde man das so machen:

<input required>

<input required type="number">

<input required type="number" min="10" max="20">

Mit CSS kannst du dann valide und invalide Eingabefelder unterschiedlich stylen:

input:valid {  
    color:green;  
}  
input:invalid {  
    color:red;  
}

Das Ganze als Online-Beispiel (getestet nur mit aktuellem Chrome): http://jsfiddle.net/tg3fd/

Nicht alle Browser beherrschen diese Validierungs-Methoden von Haus aus, eine Übersicht gibt es bei caniuse: http://caniuse.com/#feat=form-validation

Bei den CSS-Pseudoklassen :valid und :invalid sieht es vermutlich ganz ähnlich aus.

Um älteren Browsern das Verhalten beizubringen würde ich ein Polyfill einsetzen. Das ist i.d.R. eine Javascript-Datei, die man einbinden muss. Google wird dir da sicher zur Hand gehen ;)

[Auge]

Hallo

Das Ganze als Online-Beispiel (getestet nur mit aktuellem Chrome): http://jsfiddle.net/tg3fd/

Nicht alle Browser beherrschen diese Validierungs-Methoden von Haus aus, eine Übersicht gibt es bei caniuse: http://caniuse.com/#feat=form-validation

Bei den CSS-Pseudoklassen :valid und :invalid sieht es vermutlich ganz ähnlich aus.

Der Firefox 29 kann es auch. Das gilt für die Validierung als auch die Pseudoklassen.

Tschö, Auge