Проверка формы HTML - не проверять ввод скрытого текста

Question

У меня есть форма, где пользователь должен выбирать между двумя режимами, с двумя отдельными наборами входов. Некоторые входы required,

<form>
  <div class="form-group">
    <label>This or that?</label>
    <div class="controls">
      <label class="radio-inline">
        <input type="radio" name="thisthat" value="this">
        This
            </label>
      <label class="radio-inline">
        <input type="radio" name="thisthat" value="that" checked>
        That
      </label>
    </div>
  </div>
  <div class="this"> <!-- hidden as the page loads -->
    <div class="form-group">
      <input type="text" class="form-control" required="" placeholder="Some of this" />
    </div>
    <div class="form-group">
      <input type="text" class="form-control" required="" placeholder="Some more of this" />
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="This again" />
    </div>
  </div>
  <div class="that">
    <div class="form-group">
      <input type="text" class="form-control" required="" placeholder="Some of that" />
    </div>
    <div class="form-group">
      <input type="text" class="form-control" required="" placeholder="Some more of that" />
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="That again" />
    </div>
  </div>
  <button class="btn btn-info" type="submit">Submit</button>
</form>

Пример на CodePen

Когда пользователь заполняет одну часть формы, отправка запрещается из-за пустых полей в другой части.

Как я могу отключить проверку полей в скрытой части? Желательно без удаления required свойства скрытых входов.

Есть ли способ сделать это по умолчанию?

Answer 1

(У меня недостаточно репутации, чтобы комментировать) Возможно, вы можете использовать сочетание проверки jQuery ( https://jqueryvalidation.org/validate) и предотвращения поведения по умолчанию, чтобы получить желаемый результат.