:invalid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Probieren Sie es aus

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

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

<form>
  <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
  >
</form>

Diese Pseudoklasse ist nützlich, um dem Benutzer Fehler in Formularfeldern hervorzuheben.

Syntax

css
:invalid {
  /* ... */
}

Barrierefreiheit

Die Farbe Rot wird häufig verwendet, um ungültige Eingaben anzuzeigen. Personen mit bestimmten Arten von Farbenblindheit können den Status der Eingabe nicht erkennen, es sei denn, es gibt ein zusätzliches Indikator, das nicht auf Farbe angewiesen ist, um Bedeutung zu vermitteln. Üblicherweise werden beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Elemente färben, um Validierung zu zeigen

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: #800000;
  border-width: 3px;
}

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

Ergebnis

Abschnitte stufenweise anzeigen

In diesem Beispiel verwenden wir :invalid zusammen mit ~, dem nachfolgenden Geschwisterkombinator, um ein Formular stufenweise erscheinen zu lassen, sodass das Formular zunächst den ersten Punkt anzeigt, den es auszufüllen gilt. Wenn der Benutzer jeden Punkt ausfüllt, zeigt das Formular den nächsten an. Wenn das gesamte Formular ausgefüllt ist, kann der Benutzer es absenden.

HTML

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

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

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

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

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

Anmerkungen

Optionsfelder

Wenn eines der Optionsfelder in einer Gruppe required ist, wird die :invalid-Pseudoklasse auf alle angewendet, wenn keines der Felder in der Gruppe ausgewählt ist. (Gruppierte Optionsfelder teilen denselben Wert für ihr name-Attribut.)

Gecko-Standardeinstellungen

Standardmäßig wendet Gecko keinen Stil auf die :invalid-Pseudoklasse an. Es wendet jedoch einen Stil (ein rotes "Glühen" mit der box-shadow-Eigenschaft) auf die :user-invalid-Pseudoklasse an, die in einer Teilmenge der Fälle für :invalid gilt.

Spezifikationen

Specification
HTML
# selector-invalid
Selectors Level 4
# invalid-pseudo

Browser-Kompatibilität

Siehe auch