Валидация форм (required, pattern, min, max)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 22
Автор
Рек. время прохождения 7 минут
Упражнений 9
Комментарии 0
Тренажер HTML
В этом тренажере мы поработаем с валидацией форм в HTML. Валидация — это проверка данных, которые вводит пользователь, прямо в браузере, еще до отправки на сервер. Это помогает избежать ошибок и сразу подсказать человеку, что пошло не так. Мы сосредоточимся на четырех ключевых атрибутах: `required`, `pattern`, `min` и `max`. Ты научишься делать поля обязательными для заполнения, устанавливать ограничения на минимальное и максимальное количество, а также задавать строгие форматы для вводимых данных, например, для артикулов товаров. Каждое задание — это небольшой практический шаг, который поможет тебе сделать твои формы более надежными и удобными для пользователя.
Список тем

Обязательное поле

id: 37859_form-validation-required-1

В форме заказа нужно указать артикул товара. Сделайте так, чтобы это поле нельзя было оставить пустым. Браузер должен показать ошибку, если пользователь попытается отправить форму с незаполненным полем артикула.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input[type="text"],
input[type="number"],
input[type="checkbox"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"] {
    width: auto;
}

input:invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

input:valid {
  border-color: #2ecc71;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    margin-right: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}
HTML
<form class="form-container">
  <div class="form-group">
    <label for="sku">Артикул товара</label>
    <input type="text" id="sku" name="sku" input1>
  </div>
  <button type="submit" class="submit-btn">Отправить</button>
</form>
Чтобы сделать поле обязательным для заполнения, добавьте к тегу `<input>` атрибут `required`. Этот атрибут является булевым, то есть ему не нужно присваивать значение.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Обязательное согласие

id: 37859_form-validation-required-2

Добавьте в форму флажок (checkbox) для подтверждения комплектации. Отправка формы должна быть невозможна, пока пользователь не поставит галочку.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input[type="text"],
input[type="number"],
input[type="checkbox"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"] {
    width: auto;
}

input:invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

input:valid {
  border-color: #2ecc71;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    margin-right: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}
HTML
<form class="form-container">
  <div class="form-group checkbox-group">
    <input type="checkbox" id="confirm" name="confirm" input1>
    <label for="confirm">Комплектация проверена</label>
  </div>
  <button type="submit" class="submit-btn">Подтвердить</button>
</form>
Атрибут `required` работает не только для текстовых полей, но и для чекбоксов. Просто добавьте его к тегу `<input type="checkbox">`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Минимальное количество

id: 37859_form-validation-min-1

В форме заказа нужно указать количество товара. Пользователь не должен иметь возможность указать ноль или отрицательное число. Установите минимально допустимое значение равным 1.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input[type="text"],
input[type="number"],
input[type="checkbox"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"] {
    width: auto;
}

input:invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

input:valid {
  border-color: #2ecc71;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    margin-right: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}
HTML
<form class="form-container">
  <div class="form-group">
    <label for="quantity">Количество</label>
    <input type="number" id="quantity" name="quantity" value="1" input1="1">
  </div>
  <button type="submit" class="submit-btn">Добавить в корзину</button>
</form>
Для числовых полей (`<input type="number">`) используется атрибут `min`. Чтобы задать минимальное значение, напишите `min="1"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Максимальный остаток

id: 37859_form-validation-max-1

На складе осталось всего 10 единиц товара. Не дайте пользователю заказать больше. Установите максимальное значение для поля "Количество" равным 10.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input[type="text"],
input[type="number"],
input[type="checkbox"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"] {
    width: auto;
}

input:invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

input:valid {
  border-color: #2ecc71;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    margin-right: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}
HTML
<form class="form-container">
  <div class="form-group">
    <label for="quantity">Количество (макс. 10)</label>
    <input type="number" id="quantity" name="quantity" value="1" input1="10">
  </div>
  <button type="submit" class="submit-btn">Добавить в корзину</button>
</form>
По аналогии с `min`, атрибут `max` ограничивает максимальное значение для числового поля. В данном случае нужно написать `max="10"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Оценка товара в диапазоне

id: 37859_form-validation-minmax-1

Создайте поле для оценки товара по 5-звездочной шкале. Значение должно быть целым числом от 1 до 5 включительно. Используйте два атрибута, чтобы задать этот диапазон.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input[type="text"],
input[type="number"],
input[type="checkbox"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"] {
    width: auto;
}

input:invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

input:valid {
  border-color: #2ecc71;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    margin-right: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}
HTML
<form class="form-container">
  <div class="form-group">
    <label for="rating">Ваша оценка (1-5)</label>
    <input type="number" id="rating" name="rating" input1="1" input2="5">
  </div>
  <button type="submit" class="submit-btn">Оценить</button>
</form>
Вы можете использовать атрибуты `min` и `max` вместе, чтобы задать точный диапазон допустимых значений. Добавьте `min="1"` и `max="5"` к полю ввода.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Проверка по шаблону (pattern)

id: 37859_form-validation-pattern-1

Код отдела должен состоять ровно из трех заглавных латинских букв (например, `DEV` или `SAL`). Создайте поле ввода и добавьте правило проверки, чтобы принимались только такие значения.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input[type="text"],
input[type="number"],
input[type="checkbox"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"] {
    width: auto;
}

input:invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

input:valid {
  border-color: #2ecc71;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    margin-right: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}
HTML
<form class="form-container">
  <div class="form-group">
    <label for="dept-code">Код отдела (3 заглавные буквы)</label>
    <input type="text" id="dept-code" name="dept-code" input1="[A-Z]{3}" title="Введите 3 заглавные латинские буквы">
  </div>
  <button type="submit" class="submit-btn">Проверить</button>
</form>
Для проверки по шаблону используется атрибут `pattern`. В его значении указывается <span class="cfb-tt-hover" data-title="Специальная строка, описывающая шаблон для поиска и проверки текста.">регулярное выражение</span>. Выражение `[A-Z]{3}` означает 'любая заглавная латинская буква, повторенная ровно 3 раза'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сложный формат артикула

id: 37859_form-validation-pattern-2

Теперь усложним задачу. Артикул товара имеет строгий формат: три заглавные буквы, дефис, и затем четыре цифры (например, `WID-1024`). Используйте атрибут `pattern`, чтобы вставить готовое регулярное выражение в код.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input[type="text"],
input[type="number"],
input[type="checkbox"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"] {
    width: auto;
}

input:invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

input:valid {
  border-color: #2ecc71;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    margin-right: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}
HTML
<form class="form-container">
  <div class="form-group">
    <label for="sku">Артикул (формат: ABC-1234)</label>
    <input type="text" id="sku" name="sku" pattern="input1" title="Формат: три заглавные буквы, дефис, четыре цифры">
  </div>
  <button type="submit" class="submit-btn">Проверить</button>
</form>
Регулярное выражение для этого формата: `[A-Z]{3}-\d{4}`. Здесь `[A-Z]{3}` — это три заглавные буквы, `-` — это дефис, а `\d{4}` — это четыре цифры. Вам нужно вставить это выражение в качестве значения атрибута `pattern`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Обязательный и в нужном формате

id: 37859_form-validation-combined-1

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

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input[type="text"],
input[type="number"],
input[type="checkbox"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"] {
    width: auto;
}

input:invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

input:valid {
  border-color: #2ecc71;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    margin-right: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}
HTML
<form class="form-container">
  <div class="form-group">
    <label for="serial">Серийный номер (8 цифр)</label>
    <input type="text" id="serial" name="serial" input1 input2="\d{8}" title="Введите ровно 8 цифр">
  </div>
  <button type="submit" class="submit-btn">Сохранить</button>
</form>
Атрибуты валидации можно комбинировать. Просто добавьте к элементу `<input>` и `required`, и `pattern` с нужным регулярным выражением (`\d{8}` для восьми цифр).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Итоговая форма инвентаризации

id: 37859_form-validation-final-1

Давайте соберем все вместе. Создайте форму для инвентаризации. Артикул (формат `SKU-` + 5 цифр) обязателен. Количество на складе — тоже обязательное поле, число от 0 до 999. Заполните все пропуски, чтобы валидация работала корректно.

CSS
body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 15px;
  box-sizing: border-box;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input[type="text"],
input[type="number"],
input[type="checkbox"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"] {
    width: auto;
}

input:invalid {
  border-color: #e74c3c;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

input:valid {
  border-color: #2ecc71;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    margin-right: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}
HTML
<form class="form-container">
  <div class="form-group">
    <label for="item-sku">Артикул</label>
    <input type="text" id="item-sku" name="item-sku" input1 pattern="SKU-\d{5}" title="Формат: SKU-12345">
  </div>
  <div class="form-group">
    <label for="item-qty">Количество на складе</label>
    <input type="number" id="item-qty" name="item-qty" input2 input3="0" input4="999">
  </div>
  <button type="submit" class="submit-btn">Записать</button>
</form>
Здесь нужно применить все изученные атрибуты: `required` для обязательных полей, `pattern` для формата артикула, а также `min` и `max` для задания диапазона количества.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру