Псевдокласс CSS `:invalid`

:invalid — это CSS-псевдокласс, который соответствует любому элементу <form>, <fieldset>, <input> или другому элементу <form>, содержимое которого не проходит проверку валидности.

Этот псевдокласс полезен для выделения ошибок в полях формы.

Попробуйте

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>

Синтаксис

:invalid {
  /* ... */
}

Специальные возможности

Красный цвет часто используется для обозначения некорректного ввода. Люди с некоторыми видами дальтонизма не смогут определить состояние поля, если оно не сопровождается дополнительным индикатором, который не полагается на цвет для передачи смысла. Обычно для этого используют поясняющий текст и/или значок.

• Пояснения MDN к WCAG, руководство 1.4

• [Понимание критерия успешного соответствия 1.4.1

  Понимание WCAG 2.0 от W3C](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.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

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;
}

Результат

Поэтапное отображение разделов

В этом примере мы используем :invalid вместе с ~, комбинатором следующих соседей, чтобы показывать форму поэтапно: сначала отображается первый пункт, который нужно заполнить, а после его заполнения пользователем форма показывает следующий. Когда вся форма будет заполнена, пользователь сможет отправить её.

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

/* 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;
}

Результат

Примечания

Переключатели

Если любой переключатель в группе является required, псевдокласс :invalid применяется ко всем переключателям в группе, если ни один из них не выбран. (Переключатели в одной группе имеют одинаковое значение атрибута name.)

Поведение Gecko по умолчанию

По умолчанию Gecko не применяет стиль к псевдоклассу :invalid. Однако он применяет стиль (красное «свечение» с использованием свойства box-shadow) к псевдоклассу :user-invalid, который применяется в некоторых случаях для :invalid.

Спецификации

Совместимость с браузерами

См. также

• Другие псевдоклассы, связанные с проверкой валидности: :required, :optional, :valid
• Связанные псевдоклассы Mozilla: :user-invalid, :-moz-submit-invalid
• Проверка данных формы
• Получение состояния валидности из JavaScript