Отложенное применение :invalid в HTML5 без JavaScript

Быстрый ответ

Для того, чтобы стили :invalid активировались после первого взаимодействия, примените JavaScript, добавляя к элементу ввода класс при возникновении определённого события, например, blur или input.

// Имена классов с долей юмора добавляют веселья в процесс отладки.
document.querySelector('input').addEventListener('blur', function() {
  this.classList.add('touched'); // Самая памятная отметка!
});

В вашем CSS учтите этот класс:

input:invalid.touched { // Проверка и испытание на прочность!
  // здесь могут быть ваши стили для невалидного ввода
}

Таким образом, применённый стиль появится только после окончания ввода данных пользователем (событие blur), что предотвратит ошибки, возникающие, пока он печатает.

Откладывание уведомлений о валидации

Использование :not(:focus):invalid позволяет отложить уведомление о валидации до тех пор, пока пользователь не переключится на другое поле ввода. Это как бы говорит пользователю: "Подожди, не спешим!"

input:not(:focus):required:invalid {
  // здесь могут быть стили для несоответствующих данных
}

Мгновенная валидация

Если требуется немедленное уведомление об ошибке, как только начат ввод, :not(:placeholder-shown):invalid станет вашим надёжным путеводителем. Placeholder в данном случае ведёт себя как волшебный затвор, выступая против раннего появления сообщений об ошибках.

input:not(:placeholder-shown):required:invalid {
  // сигналы тревоги ведут диалог здесь!
}

Продуманное взаимодействие

Добавьте изюминку (добавляя класс '.touched') при помощи обработчиков событий JavaScript, упрощая интеракцию форм с пользователями.

// Слушаем истории пользователя через события
['blur', 'input', 'change'].forEach(event => {
  document.querySelector('input').addEventListener(event, function() {
    this.classList.add('touched'); // Золото интуитивной реакции!
  });
});

Этот класс добавляет штрих осobого шарма вашему CSS:

input:invalid.touched {
  // вот как невалидные данные преображаются в совершенство!
}

Доступность и приветливый UX

Оформляйте свой интерфейс так, чтобы он был визуально привлекательным и доступным для всех пользователей. Предоставляйте чёткие инструкции и используйте атрибуты и роли ARIA.

Единообразие между браузерами

Из-за различий между браузерами, рассмотрите использование браузерно-специфичных псевдоклассов, например, :-moz-ui-invalid для Firefox. Это придаст вашим формам гибкость и будет способствовать их стилистической и функциональной гармонии в различных условиях.

Взгляд в будущее: новые стандарты

Изучайте новшества и обратите внимание на экспериментальный псевдокласс :user-invalid, который включён в спецификацию Selectors Level 4. Будьте как ранняя пташка, предугадывающая тренды валидации форм.

Визуализация

Представим, что наши поля ввода выстроились на старте:

Готовность, внимание... И только после сигнала от пользователя (🖱️), происходит...

Настройка с помощью типов ввода HTML5 и кнопкой "Отправить"

Используя специфичные типы input, такие как email, password и другие, вы сможете воспользоваться встроенной валидацией браузера и адаптированной клавиатурой для мобильных устройств. А ваша кнопка "Отправить" также сыграет ключевую рольв запуске валидации.

Улучшение UX для различных устройств и платформ

Учитывайте разнообразие методов ввода, используемых пользователями, включая сенсорный ввод, клавиатуру и вспомогательные технологии. Такой подход сделает опыт использования ваших форм максимально осмысленным.

Проверка и отечественная связь

Проводите регулярное тестирование и оптимизацию — убедитесь, что ваша система валидации работает без осложнений, улучшая пользовательский опыт и обеспечивая всю функциональность форм.

Полезные материалы

1. :invalid | CSS-Tricks — подробное описание псевдокласса :invalid в CSS.
2. :invalid – CSS: Cascading Style Sheets | MDN — всеобъемлющий гид по селектору :invalid.
3. Learn Forms | web.dev — обучающее руководство о формах.
4. Введение в браузерные события — подробный обзор браузерных событий.
5. Selectors Level 3 — основной источник информации о селекторах в формах.
6. Sign-in form best practices | Articles | web.dev — лучшие методики для успешной валидации форм.