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 ;)
“All right, then, I'll go to hell.” – Huck Finn