Django-HTMX表单验证错误时如何设置不同渲染目标？

你可以通过两种核心方法解决这个问题，基于HTMX的响应头或OOB交换机制，让表单验证失败时仅更新表单区域，而非替换列表：

方法一：通过响应头动态修改HX-Target #

1. 修改模板，为表单容器添加ID
   给包含表单的modal-body设置唯一ID，用于指定验证失败时的替换目标：

   <div class="modal-header">
       <h5 class="modal-title" id="Object_ModalLabel">{% if object %}Edit{% else %}Create{% endif %} Object</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
   </div>
   <!-- 添加唯一ID：Object_Form_Container -->
   <div class="modal-body" id="Object_Form_Container">
       <form hx-post="{{targetURL}}" hx-target="#Object_List" method="POST">
           {% csrf_token %}
           {{form.as_div}}
           <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
               <button type="submit" class="btn btn-primary">Save</button>
           </div>
       </form>
   </div>
   

2. 重写视图的form_invalid方法，设置响应头
   在Object_Create和Object_Update视图中，当表单验证失败时，通过HX-Target响应头覆盖默认的替换目标：

   class Object_Create(ResponsePathMixin, HtmxRequiredMixin, CreateView):
       template_name = 'Object_Form.html'
       model = Object_
       form_class = Object_Form
       success_url = reverse_lazy('list-object')
   
       def form_invalid(self, form):
           response = super().form_invalid(form)
           # 指定验证失败时替换表单容器
           response['HX-Target'] = '#Object_Form_Container'
           return response
   
   class Object_Update(ResponsePathMixin, HtmxRequiredMixin, UpdateView):
       template_name = 'Object_Form.html'
       model = Object_
       form_class = Object_Form
       success_url = reverse_lazy('list-object')
   
       def form_invalid(self, form):
           response = super().form_invalid(form)
           response['HX-Target'] = '#Object_Form_Container'
           return response
   

   工作逻辑：表单提交后，验证通过时HTMX使用默认的hx-target="#Object_List"更新列表；验证失败时，视图返回的HX-Target头会覆盖默认设置，仅更新表单区域显示错误信息。

方法二：使用HTMX的OOB（Out-of-Band）交换 #

若偏好通过HTML结构控制替换规则，可采用OOB交换：

1. 修改表单模板，添加OOB标记
   给整个表单容器添加hx-swap-oob="true"属性，让HTMX在验证失败时自动定位并替换该容器：

   <!-- 添加OOB标记和唯一ID -->
   <div id="Object_Form_Container" hx-swap-oob="true">
       <div class="modal-header">
           <h5 class="modal-title" id="Object_ModalLabel">{% if object %}Edit{% else %}Create{% endif %} Object</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
           <form hx-post="{{targetURL}}" hx-target="#Object_List" method="POST">
               {% csrf_token %}
               {{form.as_div}}
               <div class="modal-footer">
                   <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                   <button type="submit" class="btn btn-primary">Save</button>
               </div>
           </form>
       </div>
   </div>
   

2. 视图可选优化
   视图的form_invalid默认返回表单模板，HTMX会自动识别OOB元素并替换对应容器。若想跳过重定向提升效率，可在form_valid中直接返回列表HTML：

   def form_valid(self, form):
       super().form_valid(form)
       # 直接渲染列表模板，避免重定向
       list_view = Object_List()
       list_view.request = self.request
       context = list_view.get_context_data()
       return list_view.render_to_response(context)
   

额外提示 #

• 确保Object_Form.html仅包含表单相关HTML，避免OOB交换引入冗余内容。
• 两种方法均无需实时验证，完全适配当前需求。

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