如何将required = false更改为必需的输入

Question

我的html文件有一个select，有三个不同的选项。如果您选择了一个，它将根据您选择的选项显示不同的输入，但是这些输入在默认情况下是必需的，如果我没有填写所有的输入，我就无法发送表单。

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";
}
}

<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>

Answer 1

为所有输入添加required属性。我对代码风格没有信心，但作为一个逻辑示例:

<input ... name="account_number" required="{{school_role === 1}}" ... />

Answer 2

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>