`:invalid` CSS-Pseudoklasse

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.

Die :invalid CSS Pseudoklasse repräsentiert jedes <form>, <fieldset>, <input> oder andere <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 Feldfehler hervorzuheben.

Syntax

css

:invalid {
  /* ... */
}

Die Farbe Rot wird häufig verwendet, um ungültige Eingaben anzuzeigen. Personen mit bestimmten Arten von Farbenblindheit werden den Status der Eingabe nicht feststellen können, es sei denn, es wird ein zusätzlicher Indikator verwendet, der sich nicht auf Farbe verlässt, um Bedeutung zu vermitteln. Typischerweise werden erläuternder Text und/oder ein Symbol verwendet.

Beispiele

Elemente einfärben, um die Validierung 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 stufenweise anzeigen

In diesem Beispiel verwenden wir :invalid zusammen mit ~, dem nachfolgenden Geschwisterkombinator, um ein Formular in Stufen erscheinen zu lassen, sodass das Formular zunächst das erste auszufüllende Element anzeigt. Wenn der Benutzer jedes Element ausfüllt, wird das nächste angezeigt. Wenn das gesamte Formular ausgefüllt ist, kann der Benutzer es absenden.

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>

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 eines der Radio-Buttons in einer Gruppe required ist, wird die :invalid-Pseudoklasse auf alle angewendet, wenn keiner der Buttons in der Gruppe ausgewählt ist. (Gruppierte Radio-Buttons teilen denselben Wert für ihr name-Attribut.)

Gecko-Standardeinstellungen

Standardmäßig wendet Gecko keinen Stil auf die :invalid-Pseudoklasse an. Es wird jedoch ein Stil (ein rotes "Leuchten" mithilfe der box-shadow-Eigenschaft) auf die :user-invalid-Pseudoklasse angewendet, die in einem Teil der Fälle von :invalid zutrifft.