Атрибут required (по-русски «обязательный») сообщает браузеру, что поле нужно заполнить: пока оно пустое, форма не отправится, а рядом с полем появится сообщение. Атрибут булевый, достаточно одного слова в теге. Работает он в <input>, <select> и <textarea>, а проверку делает сам браузер, без скриптов.
В этой статье
- Атрибут required в HTML: что это и для чего нужен
- Для каких тегов и типов input работает required
- Как записать атрибут required: какие у него бывают значения
- Что считается заполненным полем при required: пробелы, select и radio
- Что делает required при отправке: invalid, novalidate и formnovalidate
- Как изменить сообщение required: setCustomValidity
- Стиль required: :required, :optional, :invalid и :user-invalid
- Как добавить и убрать required через JavaScript и jQuery
- Условный required: сделать поле обязательным по выбору посетителя
- Required не защищает данные: проверка на сервере, ASP.NET Core и другие
- Частые ошибки с атрибутом required
- Шпаргалка по атрибуту required
Атрибут required в HTML: что это и для чего нужен
Слово required переводится как «обязательный». Атрибут нужен там, где без значения форма бессмысленна: адрес для ответа, согласие с условиями, номер телефона для связи. Записывают его одним словом в открывающем теге.
<form>
<input type="email" required>
<button type="submit">Отправить</button>
</form>Нажмите кнопку при пустом поле: форма не отправилась (submit равно нулю), сработало событие invalid. Введите адрес и нажмите ещё раз.
Текст сообщения браузер берёт свой и показывает его на языке посетителя. Если поле пустое, событие submit не наступает вообще: браузер останавливает отправку, переводит курсор в первое неверное поле и показывает подсказку.
Для каких тегов и типов input работает required
Атрибут работает у <input> с большинством типов, а также у <textarea> и <select>. Для типов, у которых значение есть всегда, или у которых его нельзя заполнить, он ничего не делает. В демонстрации выберите элемент и посмотрите, считает ли браузер пустое поле незаполненным.
<input type="text" required>
<input type="range" required>
<textarea required></textarea>
<select required>
<option value="">Выберите</option>
</select>У text, email, number, date, checkbox, radio, file, textarea и select пустое поле незаполнено. У color и range значение есть всегда, а у hidden поле не проверяется.
| Где прописан required | Что значит «заполнено» | Работает |
|---|---|---|
text, search, url, tel, email, password | В поле есть хотя бы один символ | Да |
number, date, time, month, week, datetime-local | Выбрано значение | Да |
checkbox | Флажок отмечен | Да |
radio | Отмечена любая кнопка группы | Да |
file | Выбран файл | Да |
<textarea> | В поле есть хотя бы один символ | Да |
<select> | Выбран пункт с непустым значением | Да |
color, range | Значение есть всегда | Нет смысла |
hidden, submit, reset, button, image | Посетитель не заполняет эти поля | Нет |
У <button>, <fieldset>, <div> и <a> атрибута required нет. Подробнее о значениях type рассказано в уроке «Поля ввода: input и его типы ».
Как записать атрибут required: какие у него бывают значения
Атрибут булевый: важно только его присутствие. Записи required и required="required" равны между собой, а значение в кавычках браузер не читает.
<input required>
<input required="required">
<input required="false">
<input>У первых трёх полей атрибут действует, включая запись required="false". Не обязательно только четвёртое поле, у которого атрибута нет.
Запись required="false" не отключает проверку, это частая ошибка. Чтобы сделать поле необязательным, атрибут нужно убрать из тега целиком.
Что считается заполненным полем при required: пробелы, select и radio
Браузер проверяет только наличие значения, а не его смысл. Три случая надо знать заранее. Поле, где записаны одни пробелы, заполненным считается. У <select> первый пункт со значением value="" играет роль подсказки и не засчитывается, а первый пункт без атрибута value засчитывается, потому что его текст становится значением. У группы переключателей достаточно прописать required одной кнопке: обязательной становится вся группа.
<input required value=" ">
<select required>
<option value="">Выберите</option>
<option value="1">Один</option>
</select>
<input type="radio" name="g" required> Один
<input type="radio" name="g"> ДваПоле с пробелами проходит проверку. Список с пустым value не проходит, пока не выбран другой пункт. В группе radio достаточно отметить любую кнопку.
Чтобы пробелы не проходили, к полю добавляют проверку через pattern или обрезают значение скриптом. Переключатели обязательно объединяют общим name. Без него required на кнопке не срабатывает совсем: одиночная кнопка без name с этим атрибутом считается заполненной даже без отметки. Для группы флажков с общим name обязательными считаются только те, у которых прописан required.
Что делает required при отправке: invalid, novalidate и formnovalidate
Если обязательное поле пустое, браузер не отправляет форму: событие submit не происходит, зато на поле срабатывает событие invalid, а фокус переходит к первому неверному полю. Проверку можно отключить целиком атрибутом novalidate у формы или у одной кнопки отправки атрибутом formnovalidate. Метод form.requestSubmit() проверку запускает, как и обычная кнопка.
<form>
<input name="a" required>
<button type="submit">Отправить</button>
<button type="submit" formnovalidate>Без проверки</button>
</form>
<form novalidate>...</form>Обычная кнопка и requestSubmit() дают только invalid. Кнопка с formnovalidate и форма с novalidate отправляются, хотя поле пусто.
Метод form.submit() проверку не запускает: он отправляет форму сразу. Подробнее о проверке полей рассказано в уроке «Встроенная валидация форм ».
Как изменить сообщение required: setCustomValidity
Стандартный текст ошибки нельзя задать атрибутом, но можно заменить из скрипта через setCustomValidity(). Вызов нужно делать в обработчике invalid, а при вводе обязательно сбрасывать сообщение пустой строкой: пока оно не пустое, поле считается неверным.
const city = document.querySelector('#city');
city.addEventListener('invalid', () => {
city.setCustomValidity('Введите название города');
});
city.addEventListener('input', () => {
city.setCustomValidity(''); // без сброса поле останется неверным
});Нажмите «Проверить» при пустом поле, потом введите слово: сообщение сбрасывается. Отметьте флажок и повторите: поле останется неверным даже с текстом.
Забытый сброс самая частая причина «непонятного» поведения: значение введено, а форма всё равно не отправляется.
Стиль required: :required, :optional, :invalid и :user-invalid
Для оформления есть четыре псевдокласса. Селектор :required находит обязательные поля, :optional необязательные. Селектор :invalid совпадает с неверным полем сразу после загрузки страницы, поэтому пустые обязательные поля загораются красным до первого ввода. Селектор :user-invalid срабатывает только после того, как посетитель поработал с полем.
label:has(+ input:required)::after {
content: ' *';
color: #a83f2e;
}
input:invalid {
border-color: #a83f2e;
}
input:user-invalid {
border-color: #a83f2e;
}Первое поле красное сразу при загрузке. Второе остаётся нейтральным, пока вы не введёте и не сотрёте букву и не выйдете из поля. Звёздочки добавлены селектором label:has(+ input:required).
Не опирайтесь только на цвет и звёздочку: подсказку об обязательности нужно дать и текстом. Поля с readonly или disabled остаются :required, но как неверные не отмечаются. Подробнее о них рассказано на страницах readonly и disabled.
Как добавить и убрать required через JavaScript и jQuery
Сделать поле обязательным и снять обязательность скрипт может через свойство required: значение true включает, false выключает. Можно управлять и атрибутом: setAttribute('required', ''), removeAttribute('required') и toggleAttribute('required').
const input = document.querySelector('input');
input.required = true; // сделать обязательным
input.required = false; // снять
input.setAttribute('required', 'false'); // всё равно обязательно
input.required = 'false'; // непустая строка тоже даёт trueНажимайте кнопки по очереди и следите за таблицей. Запись false в виде строки поле не отпускает, а убрать атрибут можно четвёртой кнопкой или присвоением false.
Если на сайте подключён jQuery, привычнее писать через его методы. Для булевых значений с версии 1.6 рекомендуют prop(), а attr() с значением 'false' ничего не отключит, как и в обычном JavaScript.
$('#email').prop('required', true); // сделать обязательным
$('#email').prop('required', false); // снять
$('#email').attr('required', 'required'); // через атрибут
$('#email').removeAttr('required'); // убратьРезультат у обоих вариантов одинаковый. Без библиотеки достаточно одной строки: input.required = false.
Условный required: сделать поле обязательным по выбору посетителя
Часто поле должно быть обязательным не всегда, а только при определённом выборе: адрес нужен, если выбрана доставка. Для этого достаточно записать состояние флажка в свойство required поля.
<label><input type="checkbox" id="d"> Нужна доставка</label>
<input id="ad" name="ad">
<script>
d.addEventListener('change', () => {
ad.required = d.checked;
});
</script>Нажмите «Оформить» с пустым адресом: форма отправляется. Отметьте доставку и нажмите снова: форма остановилась, пока адрес пуст.
Такой подход удобнее, чем прописывать required в разметке для всех случаев: пустое необязательное поле не мешает отправке, а нужное становится обязательным в тот момент, когда это важно.
Required не защищает данные: проверка на сервере, ASP.NET Core и другие
Атрибут работает только в браузере посетителя. Любой человек может убрать required в инструментах разработчика, отправить форму с пустым полем или вообще отправить запрос без браузера. Для сервера такая форма неотличима от настоящей.
<form>
<input name="city" required>
</form>
<script>
// то же самое делает посетитель в консоли
city.removeAttribute('required');
</script>Нажмите «Отправить форму»: поле пустое, форма не отправилась. Нажмите первую кнопку и отправьте снова: на сервер уходит пустое значение.
Поэтому обязательность нужно проверять ещё и на сервере. В C# и ASP.NET Core для этого у свойства модели добавляют отдельный серверный атрибут [Required], а в других языках и фреймворках есть свои аналоги. HTML-атрибут required только подсказывает браузеру, а серверная проверка защищает данные.
Частые ошибки с атрибутом required
Почти все ошибки с required возникают от ожидания, что атрибут работает как значение true или false, либо что он надёжно защищает форму. В таблице собраны такие записи и то, к чему они приводят.
| Запись | Что получится | Как правильно |
|---|---|---|
required="false" | Поле остаётся обязательным | Убрать атрибут целиком |
<input type="range" required>, color | Атрибут не нужен: значение есть всегда | Убрать required |
<button required>, <div required> | Атрибута у этих тегов нет | Прописывать required у полей формы |
| Radio без общего name | Кнопки не образуют группу, проверка не работает | Дать кнопкам один name |
<select required><option>Выберите</option> | Первый пункт считается выбранным, форма проходит | Записать value="" первому пункту |
| Поле с пробелами | Пробелы проходят проверку | Обрезать значение скриптом или использовать pattern |
<input required readonly>, disabled | Проверка required не срабатывает | Убрать readonly или disabled |
setCustomValidity(...) без сброса | Поле остаётся неверным после ввода | Сбрасывать пустой строкой при вводе |
input.required = 'false' | Непустая строка даёт true | input.required = false |
$('#a').attr('required', 'false') | Поле остаётся обязательным | prop('required', false) или removeAttr('required') |
input:invalid для всех пустых полей | Форма краснеет до первого ввода | input:user-invalid |
| required как единственная защита | Атрибут снимается в инструментах разработчика | Проверять данные на сервере |
Шпаргалка по атрибуту required
Когда нужно быстро вспомнить запись, ищите задачу в левом столбце. Правый столбец ведёт на отдельную страницу справочника.
| Что нужно | Что прописать | Тег |
|---|---|---|
| Обязательное текстовое поле | <input required> | <input> |
| Обязательный флажок | <input type="checkbox" required> | <input> |
| Обязательный список | <select required> | <select> |
| Обязательное многострочное поле | <textarea required> | <textarea> |
| Подсказка в списке | <option value="">Выберите</option> | <option> |
| Включить и выключить из JS | input.required = true | <input> |
| Выключить через jQuery | $('#a').prop('required', false) | <input> |
| Не проверять форму | <form novalidate> | <form> |
| Стиль обязательных полей | input:required { ... } | <input> |
| Свой текст ошибки | input.setCustomValidity('...') | <input> |
