Django动态切换角色表单时如何仅校验当前选中类型的必填字段

问题原因 #

你的问题由两个层面的规则导致：

1. 前端HTML5默认校验逻辑：Django表单会给必填字段自动加上required属性，哪怕你把对应表单区块设置为display: none，浏览器提交表单时仍然会校验所有带required属性的字段，只要有未填写的就会拦截提交。
2. 后端表单实例化逻辑冗余：POST请求刚进入时你就初始化了全部三个角色的子表单，虽然只会校验当前选中角色的表单，但无意义的实例化既浪费性能，也有概率引发误校验问题。

修复方案 #

1. 修改前端JS逻辑

隐藏表单区块时给所有表单项加上disabled属性，此时浏览器会跳过这些字段的校验，也不会将其值提交到后端；显示对应区块时再移除disabled属性即可。
修改后的JS代码如下：

function yesnoCheck(that) {
    const studentDiv = document.getElementById("ifStudent");
    const academicDiv = document.getElementById("ifAcademic");
    const workerDiv = document.getElementById("ifWorker");
    
    // 处理学生表单
    if (that.value == "1") {
        studentDiv.style.display = "block";
        studentDiv.querySelectorAll('input, select, textarea').forEach(el => el.disabled = false);
    } else {
        studentDiv.style.display = "none";
        studentDiv.querySelectorAll('input, select, textarea').forEach(el => el.disabled = true);
    }
    // 处理教研人员表单
    if (that.value == "2") {
        academicDiv.style.display = "block";
        academicDiv.querySelectorAll('input, select, textarea').forEach(el => el.disabled = false);
    } else {
        academicDiv.style.display = "none";
        academicDiv.querySelectorAll('input, select, textarea').forEach(el => el.disabled = true);
    }
    // 处理员工表单
    if (that.value == "3") {
        workerDiv.style.display = "block";
        workerDiv.querySelectorAll('input, select, textarea').forEach(el => el.disabled = false);
    } else {
        workerDiv.style.display = "none";
        workerDiv.querySelectorAll('input, select, textarea').forEach(el => el.disabled = true);
    }
}

2. 优化后端视图逻辑

公共表单校验通过、拿到用户选中的角色后，再按需实例化对应角色的子表单，减少不必要的性能消耗，逻辑也更清晰。
修改后的视图代码如下：

def create_person(request):
    if request.method == 'POST':
        form = PersonForm(request.POST)
        daysform = AvailableDayForm(request.POST)
        # 先校验公共表单
        if form.is_valid() and daysform.is_valid():
            data = form.save()
            daysform.save(id=data.id)
            role = data.school_role
            # 仅实例化当前选中角色对应的子表单
            if role == 1:
                sub_form = StudentForm(request.POST)
            elif role == 2:
                sub_form = AcademicForm(request.POST)
            else:
                sub_form = EmployeeForm(request.POST)
            # 校验子表单并保存
            if sub_form.is_valid():
                sub_form.save(id=data.id)
                messages.success(request, '创建成功')
                return redirect('cases:list')
        # 校验失败时初始化所有表单，用于回显错误信息
        studentForm = StudentForm(request.POST)
        academicForm = AcademicForm(request.POST)
        employeeForm = EmployeeForm(request.POST)
    else:
        # GET请求初始化所有空表单
        form = PersonForm()
        daysform = AvailableDayForm()
        studentForm = StudentForm()
        academicForm = AcademicForm()
        employeeForm = EmployeeForm()
    
    context = {
        'form': form,
        'studentForm': studentForm,
        'academicForm': academicForm,
        'employeeForm': employeeForm,
        'daysform': daysform
    }
    return render(request, 'person/create_person.html', context)

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