<form method="post" action="/">
  <div class="tabs">

    <input class="tab__link" id="tab1" type="radio" name="tabs" checked>
    <label class="tab__label i-tab1" for="tab1">Вкладка1</label>

    <input class="tab__link" id="tab2" type="radio" name="tabs">
    <label class="tab__label i-tab2" for="tab2">Вкладка2</label>

    <input class="tab__link" id="tab3" type="radio" name="tabs">
    <label class="tab__label i-tab3" for="tab3">Вкладка3</label>

    <section class="tab__content" id="content1">

      <h3 class="title-3">Вкладка 1</h3>

      <div class="flex group-form-elements">

        <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 -->

        <div class="select__container">
          <span class="group__head">Возраст</span>

          <select name="age" required>
            <option value="" hidden selected disabled>Выбрать</option>
            <option value="1">18-20 лет</option>
            <option value="2">20-30 лет</option>
            <option value="3">30-40 лет</option>
          </select>
        </div><!-- end:.select__container -->

        <div class="select__container">
          <span class="group__head">ИМТ</span>

          <select name="bmi" required>
            <option value="" disabled selected hidden>Выбрать</option>
            <option value="1">&lt; 18,5</option>
            <option value="2">18,5 - 25 (Норма</option>
            <option value="3">25-30 (Избыточный вес)</option>
            <option value="4">30-35 (Умеренное ожирение)</option>
            <option value="5">35-40 (Ожирение)</option>
          </select>
        </div><!-- end:.select__container -->

      </div><!-- end:.group-form-elements -->

      <div class="flex group-form-elements">

        <div class="select__container">
          <span class="group__head">Класс</span>
          <select name="grade">
            <option disabled selected>Выбрать</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div><!-- end:.select__container -->

        <div class="radio__container">
          <span class="group__head">Срочно?</span>
          <label>
            <input name="emergency" type="radio" value="1" required />
            <span>Плановый</span>
          </label>

          <label>
            <input name="emergency" type="radio" value="2" />
            <span>Экстренный</span>
          </label>

          <label>
            <input name="emergency" type="radio" value="3" />
            <span>Неизвестно</span>
          </label>
        </div><!-- end:.radio__container -->

      </div><!-- end:.group-form-elements -->

      <div class="textarea__container">
        <label>
          <span class="group__head">Описание</span>
          <textarea name="description" required></textarea>
        </label>
      </div><!-- end:.textarea__container -->

      <label class="button next__label i-tab2" for="tab2">Вкладка2</label>

    </section><!-- end:#content1 -->

    <section class="tab__content" id="content2">
      <h3 class="title-3">Вклакда 2</h3>

      <div class="radio__container">
        <span class="group__head">Да или нет?</span>
        <label>
          <input name="table" type="radio" required />
          <span>Да</span>
        </label>

        <label>
          <input name="table" type="radio" />
          <span>Нет</span>
        </label>
      </div><!-- end:.radio__container -->

      <div class="input__container">
        <label>
          <span class="group__head">Факторы</span>
          <textarea name="factors"></textarea>
        </label>
      </div><!-- end:.input__container -->

      <div class="input__container">
        <label>
          <span class="group__head">Сообщение</span>
          <textarea name="message" required></textarea>
        </label>
      </div><!-- end:.input__container -->

      <label class="button next__label i-tab3" for="tab3">Вкладка3</label>

    </section><!-- end:#content2 -->

    <section class="tab__content" id="content3">
      <h3 class="title-3">Вкладка 3</h3>

      <div class="radio__container">
        <span class="group__head">Анонимно?</span>

        <label>
          <input name="anonim" type="radio" value="1" required />
          <span>Да</span>
        </label>

        <label>
          <input name="anonim" type="radio" value="2" />
          <span>Нет</span>
        </label>
      </div><!-- end:.radio__container -->

      <div class="radio__container">
        <span class="group__head">Трудно?</span>

        <label>
          <input name="fill" type="radio" value="1" />
          <span>Да</span>
        </label>

        <label>
          <input name="fill" type="radio" value="2" />
          <span>Нет</span>
        </label>
      </div><!-- end:.radio__container -->

      <button>Подтвердить</button>

    </section><!-- end:#content3 -->

  </div><!-- end:.tabs -->
</form>

.tabs .group__head {
  display: block;
  margin-bottom: 5px;
}

.fieldset {
  gap: 30px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  margin: 0 -20px 20px;
  padding: 20px 20px 0;
}

.tab__content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  background: #fff;
  margin-bottom: 20px;
}

input.tab__link {
  display: none;
}

label.tab__label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

label.tab__label:before {
  font-weight: normal;
  margin-right: 10px;
  font-size: 20px;
}

label.tab__label:hover {
  color: #888;
  cursor: pointer;
}

input.tab__link:checked + label.tab__label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid;
  border-bottom: 1px solid #fff;
  background: #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

.button {
  display: inline-block;
  cursor: pointer;
  white-space: nowrap;
  background-color: #ddd;
  background-image: linear-gradient(top, #eee, #ccc);
  border: 1px solid #777;
  padding: 0 0.6em;
  margin: 0.5em;
  font: bold 1em/2em Arial, Helvetica;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset,
    0 1px 0 rgba(0, 0, 0, 0.3);
}

.button:hover {
  background-color: #eee;
  background-image: linear-gradient(top, #fafafa, #ddd);
}

.button:active {
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3) inset;
  position: relative;
  top: 1px;
}

.button:focus {
  outline: 0;
  background: #fafafa;
}

.textarea__container,
.select__container,
.input__container,
.radio__container {
  margin-bottom: 30px;
}

const checkRequired = selector => event => {
  const errors = [];
  document.querySelectorAll(`${selector} input:required, ${selector} select:required`)
    .forEach(el => {
      const { valueMissing } = el.validity;
      if (valueMissing) errors.push(el.name);
    });
  if (errors.length) {
    alert('Missing: ' + errors.join(', '));
    event.preventDefault();
    event.stopPropagation();
    return false;
  }
};

document.querySelectorAll('.i-tab2, .i-tab3')
  .forEach(el => el.addEventListener('click', checkRequired('#content1')));