Простая проверка формы перед отправкой: как не дать отправить пустое поле?

Задан 31 месяц назад1.4к просмотров2 ответа

Есть форма с полем «имя» и кнопкой. Хочу, чтобы при пустом поле форма не отправлялась, а показывалось сообщение. Как это сделать на JS для новичка?

Лев Гаврилов 🐣 Птенец

спросил 31 месяц назад

2 ответа

✓ Принятый ответ — помог автору

Подпишись на событие submit формы и, если поле пустое, отмени отправку через event.preventDefault():

<form id="form">
  <input id="name">
  <button>Отправить</button>
  <p id="error"></p>
</form>

const form = document.getElementById('form');
form.addEventListener('submit', function(event) {
  const name = document.getElementById('name').value.trim();
  if (name === '') {
    event.preventDefault();   // не отправлять
    document.getElementById('error').textContent = 'Введите имя!';
  }
});

Два важных момента:

event.preventDefault() отменяет отправку формы (иначе страница перезагрузится);
.trim() убирает пробелы по краям, чтобы строка из одних пробелов тоже считалась пустой.

Виктор Сорокин 🐣 Птенец

31 месяц назад

Для самой базовой проверки можно вообще без JS — добавь атрибут required к полю:

<input id="name" required>

Браузер сам не даст отправить пустое поле и покажет подсказку. JS нужен, когда проверки сложнее (например, формат email или совпадение паролей).

Снежана Фролова 🥚 Яйцо

30 месяцев назад

Ваш ответ

Войдите, чтобы ответить на вопрос.