Почему атрибут required у поля <input> не срабатывает (не предотвращает отправку формы)?

Коротко: required — это часть HTML5 constraint validation. Она срабатывает только в тех случаях, когда браузер выполняет стандартную валидацию при «пользовательской» отправке формы. Есть несколько типичных причин, почему кажется, что required «не работает»:

Проверочный чек‑лист (проверьте эти пункты)

1) Отправка через JavaScript (form.submit())
- Вызов form.submit() программно обходит HTML‑валидацию. Если вы где‑то делаете form.submit(), required не будет мешать отправке.
- Решение: используйте form.checkValidity()/form.reportValidity() или вручную проверяйте поля перед отправкой:
  - if (form.checkValidity()) form.submit();
  - или form.reportValidity() — покажет встроенные подсказки.

2) novalidate или formnovalidate
- Если у формы стоит <form novalidate> → валидация отключена.
- Если у кнопки есть атрибут formnovalidate (например <button type="submit" formnovalidate>), тоже отключается валидация при её нажатии.
- Решение: уберите novalidate / formnovalidate.

3) Поле отключено или скрыто
- Если input disabled или input type="hidden" или элемент имеет скрывающийся атрибут hidden/display:none в некоторых случаях — required игнорируется.
- Решение: убедитесь, что поле реально доступно для ввода (не disabled, не hidden).

4) Поле не входит в форму
- Если input находится вне <form> без использования атрибута form, браузер его не ассоциирует с формой → не валидируется при отправке этой формы.
- Решение: поместите input внутрь формы или укажите form="id_формы" у input.

5) Старый браузер
- Очень старые браузеры (IE9 и раньше) не поддерживают required. В современных браузерах поддержка есть.
- Решение: использовать полифилл или собственную валидацию на JS.

6) Некорректный тип поля
- Атрибут required не имеет смысла для type="hidden".
- Некоторые типы (например file, checkbox, radio) имеют свои нюансы — для группы радио валидация должна относиться к группе (name).

Примеры

Правильно (валидация сработает при клике по кнопке):
<form id="f">
  <input required type="text" name="name">
  <button type="submit">Отправить</button>
</form>

Неправильно (валидация обходится):
<script>
  document.getElementById('f').submit(); // обход валидации
</script>

Как правильно через JS:
const f = document.getElementById('f');
if (f.checkValidity()) {
  f.submit();
} else {
  f.reportValidity(); // покажет подсказки
}

Если приведёте свой HTML/JS (тот фрагмент, который вы показали обрывается), я посмотрю конкретно и подскажу, что именно в вашем случае мешает required сработать.

Потому что надо обрабатывать событие submit у формы, а не click у кнопки

у тебя preventDefault() на клике — он срабатывает раньше, чем браузер успевает проверить required. Переключись на submit у формы: <br/> <br/> <pre><code>let form = document.querySelector('form');
form.addEventListener('submit', function(e) {
    e.preventDefault();
    // весь твой код сюда
});</code></pre> <br/> <br/> тогда браузер сначала проверит поля, и если пустые — до обработчика не дойдёт.