My html file has a select, with three different options. If you select one it will display different inputs depending on what option you choose, but these inputs are required by default, and I can't send the form if I don't fill all the inputs.

```js
function yesnoCheck(that) {
  if (that.value == "1") {
    document.getElementById("ifStudent").style.display = "block";
  } else {
    document.getElementById("ifStudent").style.display = "none";
  }
  if (that.value == "2") {
    document.getElementById("ifAcademic").style.display = "block";
  } else {
    document.getElementById("ifAcademic").style.display = "none";
  }

  if (that.value == "3") {
    document.getElementById("ifWorker").style.display = "block";
  } else {
    document.getElementById("ifWorker").style.display = "none";
  }
}
```

```html
<div class="select">
  <select onchange="yesnoCheck(this);" name="school_role" required>
    <option value="">--------</option>
    <option value="1">Student</option>
    <option value="2">Academic</option>
    <option value="3">Employee</option>
  </select>
</div>

<div id="ifStudent" style="display: none;">
  <label class="label">Account number</label>
  <input class="input" type="text" name="account_number" value="{{ studentform.account_number.value }}" placeholder="Account number">
  <div class="help is-danger">
    {% for error in studentForm.account_number.errors %}{{ error }}{% endfor %}
  </div>

  <div id="ifEmployee" style="display: none;">
    <label class="label">Employee Number</label>
    <input class="input" type="text" name="employee_number" value="{{ employeeForm.employee_number.value }}" placeholder="Employee number">
    <div class="help is-danger">
      {% for error in employeeForm.employee_number.errors %}{{ error }}{% endfor %}
    </div>

    <div id="ifAcademic" style="display: none;">
      <label class="label">Academic number</label>
      <input class="input" type="text" name="academic_number" value="{{ academicForm.academic_number.value }}" placeholder="Academic number">
      <div class="help is-danger">
        {% for error in academicForm.academic_number.errors %}{{ error }}{% endfor %}
      </div>
```