Как проверить, что элементы с атрибутом required заполнены?

Question

[Алексей Добряков]

Имеется форма, которая находится на 3х вкладках (табах).
В каждой вкладке есть определенные элементы формы, некоторые из них имеют атрибут required.
В конце каждого таба имеется кнопка перехода на следующую вкладку.
Необходимо сделать, чтобы при нажатии на кнопку перехода на следующую вкладку, скрипт определял: заполнен ли обязательные атрибут, если нет, то происходит event.preventDefault(); и выводится ошибка.

<div class="radio__container">
  <span class="group__head">Пол</span>
  
  <label>
    <input name="gender" type="radio" value="1" required />
    <span>мужской</span>
  </label>
  
  <label>
    <input name="gender" type="radio" value="2" />
    <span>женский</span>
  </label>
</div><!-- end:.radio__container -->

Пытался определить данные элементы при помощи Jquery:

$('#content1 input[required], #content1 select[required]');

Также при помощи нативного JS:

document.querySelectorAll('#content1 input[required]');

Получается, что из radio он находит только первый пол мужской, а элемент женский не читает, хотя он тоже считается required.
Нужно, чтобы он проверял любой пол.

Элемент select тоже имеет required, но он считает его всегда заполненным, хотя слово выбрать не имеет value.

<div class="select__container">
  <span class="group__head">Возраст</span>
  
  <select name="age" required>
    <option>Выбрать</option>
    <option value="1">18-20 лет</option>
    <option value="2">20-30 лет</option>
    <option value="3">30-40 лет</option>
  </select>
</div><!-- end:.select__container -->

Полный код: https://codepen.io/pen/NWBjdmg.

Заранее благодарю за помощь

Answer 1

[Сергей Соколов]

Можно использовать встроенную валидацию, которую поддерживают современные браузеры.

В простом варианте селекторами input:required и select:required можно выбрать все инпуты с атрибутом required.

Для radio достаточно указать required у первого элемента.
Для select опции-затычке надо указать value="" и добавить атрибуты disabled hidden selected, чтобы такая опция не считалась заполнением.

При клике на следующих табах, или псевдо-кнопке внизу, проверять у текущих инпутов свойства element.validity.valueMissing:
true означает пустоту обязательного поля. Когда не все поля валидны, то preventDefault() событию предотвратит переключение таба.

Comments

[Алексей Добряков]

Благодарю! Проверил, классное решение. Большое спасибо. Завтра еще гляну на свежую голову.
Такой код сам бы я точно не написал

[Алексей Добряков]

https://codepen.io/keratry/pen/NWBjdmg
Сергей Соколов, Почему-то с чекбоксами не работает.
Если выбрать любой чекбокс, кроме первого, то он пишет, что не заполнено это поле

[Сергей Соколов]

Алексей Добряков, с чекбоксами и не должно.
Атрибут required на чекбоксе требует, чтобы именно он был включён, тот, на котором установлен этот атрибут.
Таков уж стандарт HTML.

Пример: галочка «Я согласен с условиями сервиса». Пока не отметишь, дальше не пройти.

[Алексей Добряков]

Сергей Соколов, Спасибо большое, а то голову ломаю

Answer 2

[Юрий Горбунов]

Каждое содержание таба нужно обернуть, например в блок с ID атрибутом

<div id="tab_1">
...

<button id="tab_1_submit">Перейти к табу 2</button>
</div>
<div id="tab_2">
...

<button id="tab_2_submit">Перейти к табу 3</button>
</div>

Далее на кнопки внутри каждого таба вешаете событие 'click', в котором проверяете есть ли значения у всех required элементов

Если через JS в первом табе получаете список обязательных полей так

const requiredFields = document.getElementById('tab_1').querySelectorAll('[required]')

Если через jQuery в первом табе получаете так

const requiredFields = $('#tab_1 [required]')

Проходите по спискам и проверяете заполненность полей

Получается, что из radio он находит только первый пол мужской, а элемент женский не читает, хотя он тоже считается required.
Нужно, чтобы он проверял любой пол.

Так и будет, т.к. поля у вас объединены общим name="gender", а атрибут required достаточно повесить на первое поле.

Comments

[Алексей Добряков]

Метод наверное рабочий, но я застрял на этапе прохода по спискам. Моих знаний не хватило)
Благодарю за Ваш вариант

Answer 3

[Олег]

htmlbook.ru/html/input/required

AntiDuraCorp:
элемент должен находиться в теге form, а сама форма должна отправляться через событие submit, т.е. у вас либо должна быть Save, либо через JS вызывать form.submit()

Comments

[Алексей Добряков]

Спасибо, но через submit я и сам могу проверить, а он срабатывает в самом конце, кнопка на последней вкладке.
В вопросе я подробно описал
Мне нужна именно проверка между вкладками, а не в самом конце по нажатию на submit