如何动态设置表单输入框required属性 仅展示的输入项设为必填

问题原因 #

浏览器原生表单校验规则会校验所有携带required属性的输入项，哪怕元素被设置为display: none隐藏也不会跳过校验，这是表单提交失败的核心原因。另外你提供的HTML代码存在结构错误：三个条件展示的div是逐层嵌套的状态，也会导致显隐逻辑异常，需要先修正为平级结构。

修复方案 #

1. 修正HTML结构 #

将三个条件展示区块调整为平级，输入项默认保留required属性即可：

<div class="select">
  <select onchange="yesnoCheck(this);" name="school_role" required>
    <option value="">--------</option>
    <option value="1">学生</option>
    <option value="2">教研人员</option>
    <option value="3">职工</option>
  </select>
</div>

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

<div id="ifWorker" style="display: none;">
  <label class="label">职工号</label>
  <input class="input" type="text" name="employee_number" value="{{ employeeForm.employee_number.value }}" placeholder="请输入职工号" required>
  <div class="help is-danger">
    {% for error in employeeForm.employee_number.errors %}{{ error }}{% endfor %}
  </div>
</div>

<div id="ifAcademic" style="display: none;">
  <label class="label">教研人员编号</label>
  <input class="input" type="text" name="academic_number" value="{{ academicForm.academic_number.value }}" placeholder="请输入教研人员编号" required>
  <div class="help is-danger">
    {% for error in academicForm.academic_number.errors %}{{ error }}{% endfor %}
  </div>
</div>

2. 修改JS逻辑，动态控制required属性 #

切换选项显隐对应区块的同时，同步修改对应输入项的required属性，隐藏的输入项直接移除必填校验：

function yesnoCheck(that) {
  // 预获取所有关联元素
  const studentBlock = document.getElementById("ifStudent");
  const academicBlock = document.getElementById("ifAcademic");
  const workerBlock = document.getElementById("ifWorker");
  const studentInput = studentBlock.querySelector('input');
  const academicInput = academicBlock.querySelector('input');
  const workerInput = workerBlock.querySelector('input');

  // 处理学生选项
  if (that.value == "1") {
    studentBlock.style.display = "block";
    studentInput.required = true;
  } else {
    studentBlock.style.display = "none";
    studentInput.required = false;
  }

  // 处理教研人员选项
  if (that.value == "2") {
    academicBlock.style.display = "block";
    academicInput.required = true;
  } else {
    academicBlock.style.display = "none";
    academicInput.required = false;
  }

  // 处理职工选项
  if (that.value == "3") {
    workerBlock.style.display = "block";
    workerInput.required = true;
  } else {
    workerBlock.style.display = "none";
    workerInput.required = false;
  }
}

补充说明 #

如果页面初始化时下拉框有默认选中值，需要在页面加载完成后主动调用一次yesnoCheck函数，避免初始状态下的必填校验规则不匹配：

// 页面加载完成后执行
window.onload = function() {
  const roleSelect = document.querySelector('select[name="school_role"]');
  yesnoCheck(roleSelect);
}

另外后端做表单校验时，也需要根据提交的school_role字段值，只校验对应身份的输入字段即可。

内容的提问来源于stack exchange，提问作者Lely22