:valid

Псевдоклас CSS :valid (дійсне, валідне, допустиме) представляє всі елементи <input> та інші елементи форми, чий вміст успішно проходить валідацію. Це дає змогу легко змусити дійсні поля приймати зовнішній вигляд, який допомагає користувачам перевіряти, що введені ними дані мають коректний формат.

Спробуйте його в дії

Цей псевдоклас корисний для виділення коректно заповнених полів для користувачів.

Синтаксис

:valid {
  /* ... */
}

Приклади

Позначення дійсних і недійсних полів форми

У цьому прикладі використовуються подібні структури, що вміщають додаткові елементи <span> для генерації в них вмісту; тут вони для сповіщення про дійсні чи недійсні дані:

<div>
  <label for="fname">Особове ім'я *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>

Щоб надати це сповіщення, використовується наступний CSS:

input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

input:invalid {
  border: 2px solid red;
}

input:invalid + span::before {
  content: "✖";
  color: red;
}

input:valid + span::before {
  content: "✓";
  color: green;
}

Елементам <span> задається position: relative, щоб можна було розташувати відносно них згенерований вміст. Потім абсолютно розташовується різний згенерований вміст, залежний від того, чи є дані форми дійсними, чи недійсними: зелена галочка чи червоний хрест, відповідно. Щоб додати трохи терміновості до недійсних даних, іще полям додано грубу червону межу, коли вони недійсні.

Примітка: Щоб додати ці підписи, вжито ::before, оскільки ::after вже використовується для підписів "required".

Приклад можна спробувати нижче:

Зверніть увагу на те, що обов'язкові текстові поля є недійсними, поки порожні, але дійсними, коли в них щось уведено. Поле електронної пошти, з іншого боку, є дійсним, коли порожнє, оскільки не є обов'язковим, але недійсним, коли містить щось, що не є коректною адресою електронної пошти.

Занепокоєння щодо доступності

Зелений колір заведено використовувати для позначення дійсних полів. Люди, що мають якогось роду колірну сліпоту, не зможуть з'ясувати стан поля, якщо вкупі з кольором не використовується додатковий індикатор, що не покладається на колір для донесення сповіщення. Зазвичай використовується описовий текст чи піктограма.

• MDN Розуміння WCAG, Пояснення Настанови 1.4
• Розуміння критерію успіху 1.4.1 | W3C Розуміння WCAG 2.0

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

Сумісність із браузерами

Дивіться також

• Інші псевдокласи, пов'язані з валідацією: :required, :optional, :invalid
• Валідація даних форми
• Доступ до стану валідності з JavaScript