Django模板中include前加csrf_token标签导致表单失效如何解决

你为<form>标签添加了owl-carousel类，该类是Owl Carousel轮播组件的绑定标识。轮播组件初始化时，会将绑定元素的所有直接子元素识别为轮播项，自动重构DOM结构：要么将不符合轮播要求的子元素（如csrf生成的隐藏input）移出表单范围，要么调整子元素层级导致隐藏input脱离表单的提交采集范围。
{% csrf_token %}渲染后会生成一个隐藏的<input type="hidden">元素，是表单提交时Django做csrf校验的必填参数。该参数丢失后，Django会直接拦截post请求返回403错误，表现为表单无法正常工作。
移除csrf_token后表单没有该校验参数的限制，自然可以正常提交。

• 方案1（最推荐）：调整DOM结构，拆分表单和轮播容器，避免csrf元素被轮播组件处理。
  修复后代码如下：

<form novalidate action="{% url 'action' %}" method="post" class="form xl:ml-10" id="form">
    {% csrf_token %}
    <!-- 新增独立轮播容器，仅将需要轮播的内容放入该容器 -->
    <div class="owl-carousel">
        {% include 'form1.html' %}
        {% include 'form2.html' %}
        {% include 'submit.html' %}
    </div>
</form>

• 方案2：保留原有结构，修改轮播组件初始化配置，过滤csrf隐藏元素，避免其被识别为轮播项。
  Owl Carousel 2 初始化配置示例：

$('.owl-carousel').owlCarousel({
    // 原有配置保留，新增过滤规则，忽略隐藏的input元素
    filter: function() {
        return !$(this).is('input[type="hidden"]');
    }
})

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