Django集成htmx提交表单提示Form is not bound问题求助

问题原因 #

• 1. HTML结构不合法导致表单数据丢失
     <tr> 标签的直接子元素只能是 <td> 或 <th>，直接将 <form> 作为 <tr> 的子元素时，浏览器会自动将 <form> 移到 <table> 外部，导致所有输入框、提交按钮都不在表单范围内，提交时没有任何数据发送到后端，request.POST 为空。
• 2. 视图表单实例化逻辑有缺陷
     你使用的 request.POST or None 写法会在POST数据为空时传入None，得到未绑定的表单，调用 is_valid() 时就会抛出Form is not bound错误。
• 3. 提交路径配置错误
     提交按钮的 hx-post="#some_url" 填写的是锚点而非实际接口路径，请求无法发送到对应视图。
• 4. 模板label属性配置错误
     所有字段的label的for属性都写死为 form.subject.id_for_label，无法和对应字段匹配，会影响表单可访问性。

修复方案 #

第一步：修正视图的表单实例化逻辑 #

def hx_payment_item_create(request, payment_id):
    payment = get_object_or_404(Payment, pk=payment_id)
    # 按请求方法判断是否传入POST数据，避免空POST转为None
    if request.method == "POST":
        form = forms.PaymentItemCreateFromPaymentForm(request.POST)
    else:
        form = forms.PaymentItemCreateFromPaymentForm()
    if request.method == "POST":
        if form.is_valid():
            item = form.save(commit=False)
            item.payment = payment
            item.save()
            if request.htmx:
                return redirect("core:hx-payment-item-detail", pk=item.pk)
            return redirect("core:payment-item-detail", pk=item.pk)
        else:
            print(form.errors)
    context = {"form": form, "payment": payment}
    return render(request, "core/partials/payment_item_form.html", context)

第二步：修正模板HTML结构和属性 #

推荐使用htmx属性绑定到tr上，避免form嵌套的合法性问题：

<tr 
  hx-target="this" 
  hx-swap="outerHTML"
  hx-post="{% url 'core:hx-payment-item-create' payment.id %}"
  hx-trigger="submit"
>
  {% csrf_token %}
  {{ form.non_field_errors }}
  {% for hidden_field in form.hidden_fields %}
    {{ hidden_field.errors }}
    {{ hidden_field }}
  {% endfor %}
  {% for field in form.visible_fields %}
  <td>
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
    {{ field.errors }}
    {{ field }}
    {{ field.help_text }}
  </td>
  {% endfor %}
  <td>
    <button type="submit">
      submit
    </button>
  </td>
  <td>
    <button hx-get="{% url '替换为你的取消接口对应的路由名' %}" type="button">
      cancel
    </button>
  </td>
</tr>

修复后浏览器不会再自动移动表单元素，所有输入数据都会正常提交到后端视图。

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