Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.
Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.
Как это работает?
Псевдокласс :valid применяется к элементу формы, если введённые данные соответствуют требованиям (например, правильный формат email или заполненное текстовое поле). А :invalid срабатывает, если данные некорректны. Браузер сам проверяет валидность на основе HTML-атрибутов, таких как type="email", required или pattern. Вам не нужно писать сложную логику на JavaScript — всё работает прямо из коробки!
Давайте разберём пример. Вот простая форма с полем для email, которое должно быть заполнено корректно:
В этом примере поле input с типом email проверяется браузером. Если вы введёте корректный email (например, «user@example.com»), поле подсветится зелёным. Если введёте что-то вроде «user@» или оставите поле пустым, оно станет красным. Атрибут required делает поле обязательным, и :invalid сработает, пока поле не заполнено правильно.
Почему это полезно?
Такая визуальная обратная связь помогает пользователю сразу понять, где он ошибся, без необходимости отправлять форму и ждать сообщения об ошибке. Это особенно важно для новичков, которые могут не знать, какой формат данных ожидается. Псевдоклассы :valid и :invalid экономят время разработчика и улучшают пользовательский опыт.
Ещё один плюс — это поддержка валидации без JavaScript. HTML и CSS сами по себе справляются с задачей, что делает код чище и быстрее. Конечно, для сложных сценариев вы можете добавить JavaScript, но для большинства форм встроенной валидации достаточно.
Пара советов
1. Используйте атрибут pattern для кастомных проверок. Например, pattern="[0-9]{5}" проверит, что в поле введено ровно пять цифр.
2. Не забывайте про доступность. Добавляйте текстовые подсказки или атрибут aria-describedby, чтобы экранные читалки могли сообщить пользователю об ошибке.
3. Тестируйте в разных браузерах. Хотя псевдоклассы :valid и :invalid поддерживаются повсеместно с 2018 года, стили могут немного отличаться в зависимости от браузера.
Попробуйте поэкспериментировать с этими псевдоклассами в своих проектах. Это простой способ сделать формы более интерактивными и дружелюбными. А если хотите углубиться в тему, начните с небольших экспериментов, как в примере выше, и постепенно усложняйте логику!