使用HTMX与Django提交表单后，切换表单出现必填字段错误

问题描述 #

提交project_form后，通过HTMX成功替换为project_detail_form，但新表单直接显示“此字段为必填项”的错误。

错误原因 #

在views.py中，你初始化project_detail_form时直接使用了request.POST or None：

project_detail_form = ProjectDetailForm(data=request.POST or None)

当提交project_form的POST请求到达时，request.POST里只有ProjectForm的字段数据（name、check_interval等），完全没有ProjectDetailForm需要的project、url等字段，导致project_detail_form初始化时就触发了表单验证，直接生成了必填项错误并返回给前端。

解决方案 #

1. 区分两次POST请求的处理逻辑：第一次处理ProjectForm提交，第二次处理ProjectDetailForm提交
2. 第一次返回ProjectDetailForm时，创建空的表单实例（或带上刚创建的Project作为初始值优化体验），而非使用带有ProjectForm数据的request.POST

修改后的views.py代码 #

def index(request):
    """Index view."""
    if request.method == "POST":
        try:
            # 先处理ProjectForm的提交
            project_form = ProjectForm(data=request.POST)
            if project_form.is_valid():
                new_project = project_form.save()
                # 创建带初始值的ProjectDetailForm，默认选中刚创建的项目
                project_detail_form = ProjectDetailForm(initial={"project": new_project})
                return render(
                    request,
                    "monitor/_project_detail_form.html",
                    context={"project_detail_form": project_detail_form},
                )
            
            # 若ProjectForm无效，尝试处理ProjectDetailForm的提交
            project_detail_form = ProjectDetailForm(data=request.POST)
            if project_detail_form.is_valid():
                project_detail_form.save()
                return HttpResponse("项目详情保存成功")
            
            return HttpResponse("表单验证失败")
        except Exception as e:
            return HttpResponse(f"错误: {e}")
    # GET请求时仅初始化ProjectForm
    project_form = ProjectForm()
    return render(request, "monitor/index.html", context={"project_form": project_form})

额外说明 #

• 保留_project_detail_form.html中原有的HTMX属性，确保提交请求能被视图正确识别处理
• 给ProjectDetailForm的project字段设置初始值后，前端会默认选中刚创建的项目，无需用户手动选择，提升操作体验

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