Атрибуты проверки форм
Применяйте атрибуты required, minlength, maxlength, pattern, min, max и step, а состояния проверки стилизуйте с помощью псевдоклассов :valid и :invalid.
«Атрибуты проверки форм» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Встроенная проверка браузером
HTML5 предоставляет встроенную проверку форм с помощью атрибутов. При отправке формы браузер проверяет каждое поле. Если проверка не пройдена, он показывает встроенную подсказку с ошибкой и предотвращает отправку — для базовых случаев JavaScript не требуется.
required
Добавление required к полю ввода, списку select или textarea делает его обязательным. Если при отправке формы поле пусто, браузер показывает ошибку.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength и maxlength
minlength устанавливает минимальное количество символов. maxlength запрещает ввод сверх максимального количества. Объединяйте их, чтобы задать требования к сложности пароля или ограничить длину комментариев.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max и step для числовых полей ввода
min и max задают допустимый диапазон для числовых полей и полей с датами. step задаёт шаг изменения — это полезно для диапазонов (5%, точности десятичных значений и выбора только дат).
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — проверка регулярным выражением
pattern принимает регулярное выражение JavaScript. Для отправки формы введённое значение должно соответствовать шаблону. Добавьте title, чтобы описать ожидаемый формат во всплывающей подсказке браузера с ошибкой.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — отключение встроенной проверки
Добавьте novalidate к элементу <form>, чтобы отключить всю встроенную проверку браузера. Сделайте это, если реализуете собственную проверку на JavaScript, чтобы пользователь получил единообразный интерфейс.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Проверка корректности в JavaScript
API проверки ограничений позволяет программно проверять корректность: input.validity (объект ValidityState), input.checkValidity() (возвращает логическое значение), input.setCustomValidity(message) (задаёт пользовательскую ошибку).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Вызовите setCustomValidity(message) с непустой строкой, чтобы пометить поле как некорректное и задать пользовательское сообщение. Вызовите его с пустой строкой, чтобы очистить ошибку. Это полезно для полей, проверяемых на сервере, например для проверки уникальности username.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}:valid и :invalid — псевдоклассы
Стилизуйте корректные и некорректные поля с помощью псевдоклассов CSS. Будьте внимательны: поля имеют состояние :invalid ещё до взаимодействия с пользователем. Используйте :user-invalid (в современных браузерах) или JavaScript, чтобы сначала добавить класс «обработано».
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Пользовательские сообщения об ошибках с reportValidity
form.reportValidity() запускает встроенный интерфейс проверки браузера для всех полей. Используйте его после задания пользовательских сообщений о корректности, чтобы показать их пользователю, не дожидаясь события отправки формы.
Шаблон доступного отображения ошибок
Показывайте встроенные сообщения об ошибках следующим образом: 1) добавьте aria-invalid="true" к полю, 2) выведите видимый абзац с ошибкой и свяжите его с полем с помощью aria-describedby, 3) переместите фокус на первое некорректное поле. Это подходит всем пользователям, в том числе пользователям программ чтения с экрана.
Быстрая проверка
Какой атрибут ограничивает текстовое поле максимумом в 280 символов?
Повторение: атрибуты проверки формы
required, minlength/maxlength, min/max/step и pattern бесплатно обеспечивают встроенную проверку браузером. Используйте novalidate при реализации собственной проверки с помощью JS. API проверки ограничений предоставляет JavaScript доступ к состоянию корректности. Стилизуйте ошибки с помощью :user-invalid после взаимодействия пользователя с полем.
Часто задаваемые вопросы
Урок «Атрибуты проверки форм» бесплатный?
Да — полный текст урока «Атрибуты проверки форм» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Атрибуты проверки форм»?
Применяйте атрибуты required, minlength, maxlength, pattern, min, max и step, а состояния проверки стилизуйте с помощью псевдоклассов :valid и :invalid. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Атрибуты проверки форм»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Элементы управления формой: типы input, select, textarea
- ARIA и доступность: label, role, aria-*
- Семантический HTML5: семантика вместо набора div
- Атрибуты проверки форм