html - HTML フォームの検証 - 非表示のテキスト入力を検証しない

Question

2 つの個別の入力セットを使用して、ユーザーが 2 つのモードから選択する必要があるフォームがあります。一部の入力は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非表示の入力のプロパティを削除しないことが望ましいです。

これを行うデフォルトの方法はありますか？