Eine Zusammenfassung der Pseudo-Klassen

Eine Pseudoklasse ist eine Information über ein Element, das sich in der Dokumentstruktur befindet, aber nicht über bestimmte Attribute verfügbar ist. Beispielsweise g ilt die Pse udoklasse :first-child für Elemente, die das erste Kind ihrer Eltern sind. Sie können diese Informationen aus der DOM-Struktur abrufen, es gibt jedoch kein First-C hild-Attribut.

In CSS2.1 standen eine Handvoll Pseudoklassen zur Verfügung, insbesondere die Linkzustände (:lin k, :visited ) und die von Benutzeraktionen (:activ e ,:hove r). In CSS3 wird diese Handvoll zu einem Korb, mit Pseudoklassen der Struktur (:nth -child, :n th -of-type), UI -Element (:enab led, :ch eck ed), und die, die wir jetzt betrachten, der Formularvalidierung.

Formularvalidierung ohne JavaScript

Wie ich eingangs erwähnte, führt HTML5 die clientseitige Formularvalidierung ein, ohne dass JavaScript erforderlich ist. Wenn Sie versuchen, ein Formular zu senden, überprüft Ihr Browser alle Felder und gibt einen Fehler zurück, wenn eines der Felder falsch ist. Dies geschieht meist automagisch – vorausgesetzt, Ihr Browser hat die Fähigkeit – und sieht etwa so aus, wie in Abbildung 1 gezeigt wird:

Diese Fehlermeldungen sind browser- und OS-spezifisch und schwer zu ändern (was ich in meinem Blog dokumentiert habe), aber Sie können die Art und Weise ändern, wie die Fehler auf den Elementen selbst mit den neuen Validierungs-Pseudoklassen angezeigt werden, die Teil des CSS3 Basic UI-Moduls sind.

Ich werde die aktuelle Browser-Unterstützung behandeln, während wir durch den Artikel gehen, aber kurz gesagt:

• Firefox und IE10 unterstützen einige davon.
• Opera und Chrome unterstützen alles.
• Safari unterstützt auch alles, aber die Formularüberprüfung ist standardmäßig deaktiviert.

In diesem Fall würde ich empfehlen, Chrome, Opera oder Safari zu verwenden, um die Beispiele anzuzeigen, die ich Ihnen zeigen werde.

Wenn Sie mit der Browser-Unterstützung für die Formularvalidierung auf dem Laufenden bleiben möchten, schlage ich vor, ein Auge darauf zu haben, wann ich sie verwenden kann.

Also mit all dem langweiligen technischen Guff aus dem Weg, lassen Sie uns mit dem interessanten technischen Guff weitermachen und einen Blick auf einige Beispiele der Formvalidierung werfen.

Erforderliche und optionale Elemente

Eines der häufigsten Validierungsmuster sind die obligatorischen (d. h. erforderlichen) Werte – die Felder, die der Benutzer ausfüllen muss, um den Fortschritt zu erzielen. Um ein Formularelement als obligatorisch zu markieren, müssen Sie ihm nur das erforderlic he Attribut hinzufügen:

<input type="text" required>

Wenn Sie Stile darauf anwenden möchten, um diese Anforderung anzuzeigen, können Sie die neue :require d-Pseudokla sse verwenden, die Regeln auf jedes übereinstimmende Element mit dem erforderlic hen Attri but anwendet. Sie können z. B. ein Sternchen hinter dem Text der Beschriftung setzen:

eingabe:required + label::after ' content: "*";

Die genauen Regeln, die Sie verwenden, hängen davon ab, wie Sie Ihr Dokument markiert haben. Die Regel in diesem Beispiel basiert auf dem Markup mit dieser Struktur:

<input type="text" required id="foo">
<label for="foo">Foo</label>

Das Gegenteil von erforderlich ist natürlich optional. Und würden Sie es nicht wissen, wir haben auch dafür eine Pseudo-Klasse, logischerweise benan nt:optiona l. Sie wirkt sich auf alle Formularelemente aus, die kein r equiredatt ribut haben. Sie können z. B. einen leichteren Rahmen haben:

Eingang:optional - Randfarbe: silber;

Sie können dies in Aktion in Abbildung 2 sehen oder einen Blick auf ein Live-Beispiel werfen.

Gültige und ungültige Elemente

Es gibt andere Arten der Validierung neben einfach "erforderlich" oder "optional". Sie können Musterabgleich verwenden, z. B. E-Mail-Adressüberprüfung:

<input type="email">

Wenn der Benutzer etwas in das Feld eingibt, muss er dem Muster einer E-Mail-Adresse entsprechen, andernfalls wird es als ungültig markiert. (Natürlich, wenn es nicht erforderlich ist, dann kann es leer gelassen werden.)

Sie können gültige oder ungültige Formularelemente mit Pseudoklassen mit dem Namen — warten Sie darauf – :valid und :in valid formatiere n. Möglicherweise möchten Sie je nach Validierungsstatus ein Symbol hinzufügen:

input:invalid + label::after ' content: ' ⨉'; ' input:valid + label::after ' content: '

Beachten Sie, dass diese wirksam werden, sobald die Seite geladen wird, daher sollten Sie JavaScript wahrscheinlich verwenden, um sie erst nach der Übermittlung anzuwenden, z. B. durch Hinzufügen einer Klasse zum Formular mit JavaScript:

document.form[0]s.addEventListener('submit', function(e) ' e.currentTarget.classList.add('submitted');   Ihre Fallback-Formularvalidierungsfunktion;

Das genaue Skript, das Sie verwenden, variiert, aber wie immer Sie es tun, können Sie diese Klasse verwenden, um die Formularelemente wie folgt zu formatieren:

.submitted input:invalid + label::after ' content: ' ⨉';

Abbildung 3 zeigt die Ausgabe dieser Ausgabe, und Sie können auch das Live-Beispiel sehen.

Zwei zusätzliche Dinge zu diesem Beispiel zu beachten: Erstens, um mein eigenes JavaScript zu verwenden, habe ich verhindert, dass das Formular automatisch überprüft wird, indem ic h das novali date-Attribut auf der Schaltfläche "Absenden" verwende. und zweitens, Firefox setzt ein farbiges Leuchten um Elemente in Abhängigkeit von ihrem Validierungszustand, die ich mit ihrem proprietären :-moz-ui-in valid Selektor über stimmt habe. Zeigen Sie die Quelle der Demo an, um zu sehen, wie diese verwendet werden.

Nummernbereiche

Einige der neuen Eingabetypen, z. B. number , erlauben einen Wertebereich mit de n A ttrib ute n min und max, z. B.:

<input type="number" max="10" min="1">

Obwohl Formularsteuerelemente den Benutzer in der Regel daran hindern, einen Wert außerhalb dieses Bereichs einzugeben, kann es vorkommen , dass JavaScript zum Bereitstellen von Werten verwendet wird), bei denen der für die Eingabe bereitgestellte Wert den Bereich überschreitet:

<input type="number" max="10" min="1" value="11">

In diesem Fall können Sie die Pseudo klasse :out-of -range für Ihr Styling verwenden:

einga[type='number']ng:out-of-range - Border-Color: rot;

Und wie zu erwarten, gibt es ein Gegenstück, das unter dem Namen:in-range bekannt is t:

eing[type='number']abe:in-range - Border-Color: grün;

In Abbildung 4 sehen Sie diese beiden Pseudoklassen bei der Arbeit, und wieder gibt es noch einmal ein Live-Beispiel zu sehen.

Lesen und Schreiben

Möglicherweise verfügen Sie über ein Formularfeld, das mit einem Wert vorgefüllt ist, den der Benutzer nicht bearbeiten kann, z. B. Bedingungen in einem T extbereic h. Wenn dies der Fall ist, können Sie das schreibgesc hützte Attr ibut hinzufügen:

<textarea readonly="">Lorem ipsum</textarea>

Sie können Elemente formatieren, auf die das schreib geschützte Attribut angewendet wird, indem Sie… können Sie raten? Sie haben rechter, imaginierter Leser: die:s chreibgeschüt zte Pseudoklasse. Sie können es mit der USER-sele ct CSS-Eigen schaft kombinieren, um zu verhindern, dass der Benutzer den Text auswählen kann (im Beispiel habe ich auch den Rahmenstil geändert, um ihn deutlicher zu machen):

textarea:schreibgeschützt - User-Select: keine;

Und wenn Sie es brauchen sollten, gibt es natürlich e ine :read-wri te Pseudoklasse für Elemente, auf die das Attribut nicht angewendet wurde:

textarea:read-write - User-Select: text;

Sie können die Ergebnisse in Abbildung 5 sehen, und wie zuvor gibt es auch ein Live-Beispiel.

Firefox und IE10 haben das readonly-Attribut tatsäch lich impl ementiert, haben aber noch keine Unterstützung für diese Pseudoklassen.