Lässt sich allein mit CSS und HTML feststellen, ob ein Eingabefeld leer ist?
In diesem Tutorial zeige ich dir ein paar Kniffe, mit denen du nur über CSS und HTML prüfst, ob ein Eingabefeld gültig ist. Setz das allerdings nie allein ein, sondern immer zusätzlich zu einer Validierung in PHP. Als Alternative bleibt es trotzdem interessant, wenn du dir den Umweg über JavaScript sparen willst.
Prüfen, ob das Eingabefeld leer ist
Bauen wir zuerst ein Formular. Wir nehmen ein einfaches Formular mit einem Eingabefeld. Damit die HTML-Validierung erkennt, ob das Feld leer ist, ergänze ich das Attribut required.
<form>
<label> Input </label>
<input type="text" name="input" id="input" required />
</form>Bis hierhin nichts Kompliziertes, das Attribut required ist bekannt genug. Daneben gibt es readonly, das die Änderung eines vorgegebenen Werts verhindert.
An dieser Stelle gibt es allerdings ein Problem: Tippt jemand ein Leerzeichen in das Feld, gilt es als „ausgefüllt“. Technisch stimmt das, denn es wurde etwas eingegeben, aber Leerzeichen sollen das Feld eben nicht gültig machen.
Das reicht also nicht, wir brauchen eine strengere Prüfung.
Zusätzliche Prüfungen
HTML erlaubt dir, Eingabefelder über das Attribut pattern mit einem regulären Ausdruck zu validieren.
Da Leerzeichen nicht durchgehen sollen, probieren wir es mit folgendem Muster: .*S.*. Es bedeutet: ein oder mehrere Zeichen, die keine Leerzeichen sind.
<form>
<label> Input </label>
<input type="text" name="input" id="input" required pattern=".*S.*"/>
</form>Ungültige Eingabefelder
:invalid wollen wir nicht verwenden, denn das Feld soll nicht schon im ungültigen Zustand starten. (Solange das Feld leer ist, ist es bereits ungültig.)
Es gibt die Pseudoklasse :placeholder-shown, mit der sich prüfen lässt, ob der Platzhalter angezeigt wird. Die Idee dahinter:
- Du tippst ein Zeichen in das Feld
- Ist der Platzhalter verschwunden, hat jemand etwas eingegeben
- Jetzt wird validiert oder eben als ungültig markiert
/* Afficher les bordures rouges lorsqu'elles sont remplies, mais non valides */
input:not(:placeholder-shown) {
border-color: red;
}Achte darauf, dass die Styles für gültige Felder nach denen für ungültige Felder stehen.
/* Afficher les bordures rouges lorsqu'elles sont remplies, mais non valides */
input:not(:placeholder-shown) {
border-color: hsl(0, 76%, 50%);;
}
/* Afficher les bordures vertes lorsqu'elles sont valides */
input:valid {
border-color: green;
}Achtung: Edge unterstützt :placeholder-shown nicht, in der Produktion ist das also vermutlich noch keine gute Idee. Und es gibt keinen sauberen Weg, diese Pseudoklasse zu erkennen.
