CSS-Pseudoklasse `:invalid`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die :invalid-Pseudoklasse von CSS repräsentiert jedes <form>-, <fieldset>-, <input>- oder andere <form>-Element, dessen Inhalt die Validierung nicht besteht.

Diese Pseudoklasse ist nützlich, um Benutzer auf Fehler in Formularfeldern hinzuweisen.

Probieren Sie es aus

label {
  display: block;
  margin-top: 1em;
}

input:invalid {
  background-color: ivory;
  border: none;
  outline: 2px solid red;
  border-radius: 5px;
}

<label for="email">Email Address:</label>
<input id="email" name="email" type="email" value="na@me@example.com" />

<label for="secret">Secret Code: (lower case letters)</label>
<input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />

<label for="age">Your age: (18+)</label>
<input id="age" name="age" type="number" value="5" min="18" />

<label
  ><input name="tos" type="checkbox" required checked /> - Do you agree to
  ToS?</label
>

Syntax

css

:invalid {
  /* ... */
}

Die Farbe Rot wird häufig verwendet, um ungültige Eingaben zu kennzeichnen. Menschen mit bestimmten Formen der Farbenblindheit können den Zustand der Eingabe jedoch nicht erkennen, wenn kein zusätzlicher Hinweis vorhanden ist, der die Bedeutung unabhängig von der Farbe vermittelt. Üblicherweise werden dafür beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Elemente einfärben, um das Validierungsergebnis anzuzeigen

HTML

html

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

CSS

css

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: maroon;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

Ergebnis

Abschnitte schrittweise anzeigen

In diesem Beispiel verwenden wir :invalid zusammen mit ~, dem Nachfolgende-Geschwister-Kombinator, um ein Formular schrittweise anzuzeigen. Zunächst ist nur das erste auszufüllende Feld sichtbar. Sobald der Benutzer ein Feld ausgefüllt hat, zeigt das Formular das nächste an. Ist das gesamte Formular ausgefüllt, kann es abgesendet werden.

HTML

html

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="form-name">Name</label><br />
    <input type="text" name="name" id="form-name" required />
  </fieldset>

  <fieldset>
    <legend>Contact Information</legend>
    <label for="form-email">Email Address</label><br />
    <input type="email" name="email" id="form-email" required />
  </fieldset>

  <fieldset>
    <legend>Message</legend>
    <label for="form-message">Message</label><br />
    <textarea name="message" id="form-message" required></textarea>
  </fieldset>

  <button type="submit" name="send">Submit</button>
</form>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

CSS

css

/* Hide the fieldset after an invalid fieldset */
fieldset:invalid ~ fieldset {
  display: none;
}

/* Dim and disable the button while the form is invalid */
form:invalid button {
  opacity: 0.3;
  pointer-events: none;
}

input,
textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: monospace;
  padding: 0.25em 0.5em;
}

button {
  width: 100%;
  border: thin solid darkgrey;
  font-size: 1.25em;
  background-color: darkgrey;
  color: white;
}

Ergebnis

Hinweise

Radio-Buttons

Wenn einer der Radio-Buttons einer Gruppe required ist, wird die Pseudoklasse :invalid auf alle Radio-Buttons der Gruppe angewendet, sofern keiner davon ausgewählt ist. (Radio-Buttons einer Gruppe haben denselben Wert für ihr name-Attribut.)

Standardeinstellungen in Gecko

Standardmäßig wendet Gecko keinen Stil auf die Pseudoklasse :invalid an. Gecko wendet jedoch einen Stil (ein rotes „Leuchten“ mithilfe der Eigenschaft box-shadow) auf die Pseudoklasse :user-invalid an, die in einer Teilmenge der Fälle von :invalid greift.