Поле ввода формы начальной загрузки, требующее выбора хотя бы одного элемента?

Question

У меня есть форма, где я хотел бы создать поля ввода для типа учетной записи. Это немного сложно, так как может быть только один тип учетной записи, но может быть и два. Другими словами, когда вначале вводится фамилия, им нужно выбрать либо пользователя, либо сотрудника для типа учетной записи, либо они могут выбрать оба. Как только они выберут одно или оба, в форме появятся дополнительные поля. Мой вопрос заключается в том, каков наилучший вариант, который потребовал бы от пользователя выбора хотя бы одного типа учетной записи, но в то же время позволял бы им выбирать и два, если это необходимо? Также я использую проверку HTML5 для этой цели, поэтому, если они выберут только одну, другая будет скрыта. Эти скрытые поля формы не должны быть обязательными, но теперь у меня нет способа предотвратить это. Вот пример:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group">
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <button class="btn btn-primary" data-toggle="collapse" data-target="#user-account">User Account</button>
  </div>
  <div id="user-account" class="collapse">
    <div class="form-group required">
      <input type="text" class="form-control" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
    </div>
  </div>
  <div class="form-group required">
    <button class="btn btn-primary" data-toggle="collapse" data-target="#staff-account">Staff Account</button>
  </div>
  <div id="staff-account" class="collapse">
    <div class="form-group required">
      <div class="input-group">
        <input type="text" class="form-control" name="frm_position" id="frm_position" placeholder="Choose Position" required>
      </div>
    </div>
  </div>
  <button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</form>

Таким образом, кнопки для учетной записи "Пользователь" и "Персонал" фактически являются отдельными полями в моей базе данных, и я должен сохранить значения, например, 1 или 0, если они ввели информацию о пользователе или "Персонал". Также, если я пытаюсь отправить форму только с информацией о персонале, например, я не могу, так как поля формы пользователя скрыты, но все еще требуются. Как это можно исправить, так что требуются только видимые поля?