Валидация формы на стороне клиента: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

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

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

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

Добавьте валидацию для поля "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`, выведите сообщение об ошибке и предотвратите отправку.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

Добавьте валидацию для поля "Пароль". Пароль должен быть не менее 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`, выведите сообщение об ошибке и предотвратите отправку.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

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

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`. Если они не равны, выведите сообщение об ошибке.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

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

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>` и проверить, равно ли оно пустой строке или значению по умолчанию.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

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

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`. Если чекбокс не отмечен, выведите сообщение об ошибке.

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

Результат

Лог

Выполнить

Отметить решенным

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

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

Добавьте поле для ввода возраста. Возраст должен быть в диапазоне от 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`.

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

Результат

Лог

Выполнить

Отметить решенным

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