Как изменить required = false для ввода, который является обязательным

В моем html файле есть select, с тремя различными опциями. При выборе одного из них отображаются различные входы в зависимости от выбранного варианта, но эти входы требуются по умолчанию, и я не могу отправить форму, если не заполню все входы.

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>

Добавьте атрибут required ко всем входам. Я не уверен в стиле кода, но в качестве логического примера:

<input ... name="account_number" required="{{school_role === 1}}" ... />
  1. Добавьте </div> к каждой секции
  2. Присвойте каждому div класс hide
  3. Включите скрытие при изменении выбора
  4. отключите требуемый

const ifs = [...document.querySelectorAll("[id^=if]")];
document.getElementById("school_role").addEventListener("change", function() {
  const val = this.options[this.selectedIndex].textContent;
  ifs.forEach(ifDiv => {
    ifDiv.classList.toggle("hide", !ifDiv.id.includes(val))
    const input = ifDiv.querySelector("input");
    if (ifDiv.classList.contains("hide")) input.removeAttribute("required")
    else input.setAttribute("required", true)
  });
})
.hide {
  display: none;
}
<div class="select">
  <select name="school_role" id="school_role" required>
    <option value="">--------</option>
    <option value="1">Student</option>
    <option value="2">Academic</option>
    <option value="3">Employee</option>
  </select>
</div>
<form>
  <div id="ifStudent" class="hide">
    <label class="label">Account number</label>
    <input class="input" type="text" name="account_number" value="" placeholder="Account number">
    <div class="help is-danger">
      {% for error in studentForm.account_number.errors %}{{ error }}{% endfor %}
    </div>
  </div>
  <div id="ifEmployee" class="hide">
    <label class="label">Employee Number</label>
    <input class="input" type="text" name="employee_number" value="" placeholder="Employee number">
    <div class="help is-danger">
      {% for error in employeeForm.employee_number.errors %}{{ error }}{% endfor %}
    </div>
  </div>
  <div id="ifAcademic" class="hide">
    <label class="label">Academic number</label>
    <input class="input" type="text" name="academic_number" value="" placeholder="Academic number">
    <div class="help is-danger">
      {% for error in academicForm.academic_number.errors %}{{ error }}{% endfor %}
    </div>
  </div>
  <input type="submit">
</form>

Вернуться на верх