Валидация формы на стороне клиента [Модуль 8: Работа с формами]: Тренажер JavaScript: Покоряем HTML DOM

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

В этом тренажере вы попрактикуетесь в валидации HTML-форм с использованием JavaScript. Валидация на стороне клиента позволяет проверять данные, введенные пользователем, *перед* отправкой на сервер. Это улучшает пользовательский опыт, мгновенно сообщая об ошибках, и снижает нагрузку на сервер. Вам будут представлены различные сценарии: проверка обязательных полей, формата данных (email, телефон), длины введенного текста, а также работа с сообщениями об ошибках. Каждое задание содержит HTML-форму и частично написанный JavaScript-код. Вам нужно будет заполнить пропуски в коде, чтобы реализовать требуемую валидацию. После ввода кода вы сможете сразу увидеть результат.

Список тем

Проверка обязательного поля

id: 37057_validation-1

В этой форме есть одно обязательное поле "Имя". Необходимо проверить, заполнено ли это поле перед отправкой формы. Если поле пустое, нужно вывести сообщение об ошибке под полем и предотвратить отправку формы.

CSS

.error { color: red; }

HTML

Восстановить HTML

                      <form id="myForm">
  <div>
    <label for="nm">Имя:</label>
    <input type="text" id="nm">
    <span id="name-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <div>
    <label for="nm">Имя:</label>
    <input type="text" id="nm">
    <span id="name-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById('myForm');

form.addEventListener(input__1, (event) => {
  const nameInput = document.getElementById(input__2);
  const nameError = document.getElementById('name-error');

  if (input__3.value.trim() === input__4) {
    nameError.input__5 = 'Поле обязательно для заполнения';
    event.input__6();
  } else {
    nameError.textContent = input__7;
  }
});

                     const form = document.getElementById('myForm');

form.addEventListener(input__1, (event) => {
  const nameInput = document.getElementById(input__2);
  const nameError = document.getElementById('name-error');

  if (input__3.value.trim() === input__4) {
    nameError.input__5 = 'Поле обязательно для заполнения';
    event.input__6();
  } else {
    nameError.textContent = input__7;
  }
});

Используйте событие `submit` формы. В обработчике события получите значение поля "Имя" с помощью `document.getElementById('nm').value`. Проверьте, не является ли значение пустым (`''`). Если поле пустое, выведите сообщение об ошибке, используя, например, `document.getElementById('name-error').textContent = 'Поле обязательно для заполнения';` и предотвратите отправку формы с помощью `event.preventDefault();`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Проверка email

id: 37057_validation-2

Добавьте валидацию для поля "Email". Необходимо проверить, что введенный текст соответствует формату email адреса. Если формат неверный, выведите сообщение об ошибке и предотвратите отправку.

CSS

.error { color: red; }

HTML

Восстановить HTML

                      <form id="myForm">
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email">
    <span id="email-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email">
    <span id="email-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  const emailInput = document.getElementById('email');
  const emailError = document.getElementById(input__1);

  const emailRegex = input__2;

  if (!input__3.test(emailInput.input__4)) {
    emailError.textContent = input__5;
    event.preventDefault();
  } else {
    emailError.input__6 = '';
  }
});

                     const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  const emailInput = document.getElementById('email');
  const emailError = document.getElementById(input__1);

  const emailRegex = input__2;

  if (!input__3.test(emailInput.input__4)) {
    emailError.textContent = input__5;
    event.preventDefault();
  } else {
    emailError.input__6 = '';
  }
});

Используйте регулярное выражение для проверки формата email. Например, `const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;`. Используйте метод `test()` регулярного выражения для проверки: `emailRegex.test(emailInput.value)`. Если результат `false`, выведите сообщение об ошибке и предотвратите отправку.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Проверка длины пароля

id: 37057_validation-3

Добавьте валидацию для поля "Пароль". Пароль должен быть не менее 8 символов. Выведите сообщение об ошибке, если пароль слишком короткий.

CSS

.error { color: red; }

HTML

Восстановить HTML

                      <form id="myForm">
  <div>
    <label for="password">Пароль:</label>
    <input type="password" id="password">
    <span id="password-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <div>
    <label for="password">Пароль:</label>
    <input type="password" id="password">
    <span id="password-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById(input__1);

form.addEventListener('submit', (event) => {
  const passwordInput = document.getElementById('password');
  const passwordError = document.getElementById('password-error');

  if (passwordInput.value.input__2 < input__3) {
    passwordError.textContent = input__4;
    input__5.preventDefault();
  } else {
    passwordError.textContent = '';
  }
});

                     const form = document.getElementById(input__1);

form.addEventListener('submit', (event) => {
  const passwordInput = document.getElementById('password');
  const passwordError = document.getElementById('password-error');

  if (passwordInput.value.input__2 < input__3) {
    passwordError.textContent = input__4;
    input__5.preventDefault();
  } else {
    passwordError.textContent = '';
  }
});

Получите значение поля "Пароль". Используйте свойство `length` строки, чтобы проверить длину пароля. Если `passwordInput.value.length < 8`, выведите сообщение об ошибке и предотвратите отправку.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Подтверждение пароля

id: 37057_validation-4

Добавьте поле "Подтвердите пароль" и проверьте, совпадают ли пароли. Если пароли не совпадают, выведите сообщение об ошибке.

CSS

.error { color: red; }

HTML

Восстановить HTML

                      <form id="myForm">
  <div>
    <label for="password">Пароль:</label>
    <input type="password" id="password">
    <span id="password-error" class="error"></span>
  </div>
  <div>
    <label for="confirmPassword">Подтвердите пароль:</label>
    <input type="password" id="confirmPassword">
    <span id="confirmPassword-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <div>
    <label for="password">Пароль:</label>
    <input type="password" id="password">
    <span id="password-error" class="error"></span>
  </div>
  <div>
    <label for="confirmPassword">Подтвердите пароль:</label>
    <input type="password" id="confirmPassword">
    <span id="confirmPassword-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  const passwordInput = document.getElementById(input__1);
  const confirmPasswordInput = document.getElementById('confirmPassword');
  const confirmPasswordError = document.getElementById('confirmPassword-error');

  if (input__2.value !== confirmPasswordInput.value) {
    confirmPasswordError.textContent = input__3;
    event.preventDefault();
  } else {
    confirmPasswordError.input__4 = '';
  }
});

                     const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  const passwordInput = document.getElementById(input__1);
  const confirmPasswordInput = document.getElementById('confirmPassword');
  const confirmPasswordError = document.getElementById('confirmPassword-error');

  if (input__2.value !== confirmPasswordInput.value) {
    confirmPasswordError.textContent = input__3;
    event.preventDefault();
  } else {
    confirmPasswordError.input__4 = '';
  }
});

Добавьте в HTML поле `<input type="password" id="confirmPassword">` и элемент `<span id="confirmPassword-error" class="error"></span>`. В JavaScript получите значения обоих полей. Сравните значения: `passwordInput.value !== confirmPasswordInput.value`. Если они не равны, выведите сообщение об ошибке.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Выбор из списка

id: 37057_validation-5

Добавьте выпадающий список с несколькими вариантами (например, страны). Сделайте выбор одного из вариантов обязательным.

CSS

.error { color: red; }

HTML

Восстановить HTML

                      <form id="myForm">
  <div>
    <label for="country">Страна:</label>
    <select id="country" >
      <option value="">Выберите страну</option>
      <option value="usa">США</option>
      <option value="canada">Канада</option>
      <option value="uk">Великобритания</option>
    </select>
    <span id="country-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <div>
    <label for="country">Страна:</label>
    <select id="country" >
      <option value="">Выберите страну</option>
      <option value="usa">США</option>
      <option value="canada">Канада</option>
      <option value="uk">Великобритания</option>
    </select>
    <span id="country-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  const countrySelect = document.getElementById(input__1);
  const countryError = document.getElementById('country-error');

  if (countrySelect.value === input__2) {
    countryError.textContent = input__3;
    event.preventDefault();
} else {
    countryError.textContent = input__4;
  }
});

                     const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  const countrySelect = document.getElementById(input__1);
  const countryError = document.getElementById('country-error');

  if (countrySelect.value === input__2) {
    countryError.textContent = input__3;
    event.preventDefault();
} else {
    countryError.textContent = input__4;
  }
});

Используйте тег `<select>` с несколькими `<option>`. Для более тонкой настройки (например, вывод собственного сообщения об ошибке) можно получить значение `<select>` и проверить, равно ли оно пустой строке или значению по умолчанию.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Чекбокс согласия

id: 37057_validation-6

Добавьте чекбокс "Я согласен с условиями". Сделайте его обязательным для установки перед отправкой формы.

CSS

.error { color: red; }

HTML

Восстановить HTML

                      <form id="myForm">
  <div>
    <input type="checkbox" id="agree">
    <label for="agree">Я согласен с условиями</label>
    <span id="agree-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <div>
    <input type="checkbox" id="agree">
    <label for="agree">Я согласен с условиями</label>
    <span id="agree-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById('myForm');

form.addEventListener(input__1, (event) => {
  const agreeCheckbox = document.getElementById(input__2);
  const agreeError = document.getElementById('agree-error');

  if (!agreeCheckbox.input__3) {
    agreeError.textContent = input__4;
    event.preventDefault();
  } else {
    agreeError.textContent = '';
  }
});

                     const form = document.getElementById('myForm');

form.addEventListener(input__1, (event) => {
  const agreeCheckbox = document.getElementById(input__2);
  const agreeError = document.getElementById('agree-error');

  if (!agreeCheckbox.input__3) {
    agreeError.textContent = input__4;
    event.preventDefault();
  } else {
    agreeError.textContent = '';
  }
});

Используйте `<input type="checkbox" id="agree">`. Проверьте свойство `checked`: `!agreeCheckbox.checked`. Если чекбокс не отмечен, выведите сообщение об ошибке.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Проверка числового диапазона

id: 37057_validation-7

Добавьте поле для ввода возраста. Возраст должен быть в диапазоне от 18 до 100. Выведите сообщение об ошибке, если возраст вне диапазона.

CSS

.error { color: red; }

HTML

Восстановить HTML

                      <form id="myForm">
  <div>
    <label for="age">Возраст:</label>
    <input type="number" id="age">
    <span id="age-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <div>
    <label for="age">Возраст:</label>
    <input type="number" id="age">
    <span id="age-error" class="error"></span>
  </div>
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  const ageInput = document.getElementById('age');
  const ageError = document.getElementById('age-error');

  const age = parseInt(input__1.value, 10);

  if (isNaN(age) || age < input__2 || age > input__3) {
    ageError.textContent = input__4;
    event.preventDefault();
  } else {
    ageError.textContent = '';
  }
});

                     const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  const ageInput = document.getElementById('age');
  const ageError = document.getElementById('age-error');

  const age = parseInt(input__1.value, 10);

  if (isNaN(age) || age < input__2 || age > input__3) {
    ageError.textContent = input__4;
    event.preventDefault();
  } else {
    ageError.textContent = '';
  }
});

Используйте `<input type="number" id="age">`. Получите значение поля и преобразуйте его в число: `const age = parseInt(ageInput.value, 10);`. Проверьте условие: `age < 18 || age > 100`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку