Браузер умеет проверять форму сам, без единой строчки JavaScript: атрибут required не даёт отправить форму с пустым полем, а pattern проверяет значение по шаблону. Оба атрибута просто добавляются к <input> - и браузер сам блокирует отправку, если условие не выполнено.
Нажми "Отправить", не заполняя поле - браузер сам покажет подсказку и не даст отправить форму. Потом впиши что-нибудь и попробуй снова.
required - обязательные поля
Атрибут required у поля запрещает браузеру отправлять форму, пока поле пустое - при попытке отправки браузер сам останавливает форму и показывает подсказку, без единой строчки JavaScript. Но это удобство для пользователя, а не защита: значение можно обойти через инструменты разработчика или отправив запрос напрямую на сервер, минуя форму вовсе - поэтому проверка на сервере всё равно обязательна.
<input type="text" name="name" required> - браузер не даст отправить форму, пока поле пустое.
<input type="text" name="name" placeholder="Имя (обязательно)"> - слово "обязательно" в подсказке ничего не проверяет технически: без required форма спокойно отправится и с пустым полем.
pattern - проверка по шаблону
Атрибут pattern проверяет значение поля по регулярному выражению - но проверяет ВЕСЬ текст целиком, а не наличие совпадения где-то внутри. Браузер сам оборачивает написанный шаблон в ^...$, даже если автор этого не писал - поэтому шаблон, который "должен найти" совпадение внутри длинного текста, на самом деле требует, чтобы совпадало вообще всё значение поля.
<input type="text" pattern="[0-9]{6}" title="6 цифр"> - подходит только значение из ровно шести цифр и ничего больше.
<input type="text" pattern="[0-9]{6}"> - если ожидать, что шаблон найдёт 6 цифр где-то ВНУТРИ более длинной строки (например, "код: 123456"), то это не сработает - вся строка целиком не состоит только из цифр, и браузер посчитает значение невалидным.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Считать required или pattern настоящей защитой данных | Клиентскую проверку легко обойти - через инструменты разработчика или прямой запрос к серверу | Всегда дублировать проверку на сервере - клиентская часть только для удобства |
| Ожидать, что pattern найдёт совпадение где-то внутри строки | Браузер требует совпадения ВСЕГО значения целиком - шаблон автоматически оборачивается в ^...$ | Писать шаблон так, чтобы он описывал ВЕСЬ ожидаемый текст, а не его часть |
| Красить пустые required-поля в красный сразу при загрузке страницы | Селектор :invalid срабатывает даже до того, как пользователь вообще начал печатать - страница выглядит "сломанной" с самого начала | Использовать :user-invalid (реагирует только после взаимодействия) вместо обычного :invalid |
Шпаргалка
| Термин | Значение |
|---|---|
| required | Не даёт отправить форму, пока поле пустое - удобство, не защита |
| pattern | Требует совпадения ВСЕГО значения с шаблоном (авто-якоря ^...$) |
| :invalid | Срабатывает даже на пустом поле сразу при загрузке страницы |
| :user-invalid | Срабатывает только после того, как пользователь начал взаимодействовать с полем |
Коротко: отвечаем на вопросы
Дают ли required или pattern реальную защиту от плохих данных?
Нет. Это удобство для пользователя, а не защита: значение легко обойти через инструменты разработчика или отправив запрос напрямую на сервер, минуя форму вовсе. Проверка на сервере всё равно обязательна для любых важных данных.
Проверяет ли pattern часть текста или весь текст целиком?
Весь текст целиком. Браузер автоматически оборачивает написанный шаблон в ^...$, даже если автор этого не указал сам - поэтому шаблон, задуманный как поиск совпадения где-то внутри строки, на самом деле требует полного совпадения всего значения.
Показывает ли :invalid ошибку сразу при загрузке пустой страницы?
Да, это реальная и задокументированная особенность: пустое обязательное поле сразу соответствует :invalid, даже если пользователь ещё ничего не вводил - страница может выглядеть "сломанной" с первого взгляда. Более новый селектор :user-invalid решает эту проблему, срабатывая только после того, как пользователь начал взаимодействовать с полем.
