Django表单提交：如何避免错误信息重复显示并设为红色？

问题背景 #

在基于Django开发的登录功能中使用HTMX提交表单时，提交无效信息会导致错误信息重复显示两次。尝试移除HTML中手动渲染错误的代码后，页面又完全不显示任何错误提示。

问题原因 #

1. 错误重复显示：使用{{ login_form.as_p }}渲染表单时，Django会自动在每个字段下方生成对应的字段级错误提示，加上手动遍历login_form.errors渲染的顶部错误，导致同一错误出现两次。
2. 移除后无错误显示：AuthenticationForm的全局错误（如用户名密码不匹配）属于非字段错误，as_p方法不会自动渲染这类错误，因此移除手动错误代码后，用户看不到任何错误提示。

解决方案 #

1. 修改HTML模板：自定义表单渲染+统一错误提示 #

替换原有的{{ login_form.as_p }}为自定义字段渲染，只保留顶部统一的红色错误提示区域：

<form hx-post="{{ request.path }}" class="modal-content p-4" enctype="multipart/form-data">
  <div class="modal-header">
    <h5 class="modal-title">Ingresa tu usuario y clave</h5>
  </div>
  {% csrf_token %}

  <!-- 自定义渲染每个字段，不显示字段旁的错误 -->
  <div class="mb-3">
    <label for="{{ login_form.username.id_for_label }}" class="form-label">Nombre de usuario</label>
    {{ login_form.username }}
  </div>
  <div class="mb-3">
    <label for="{{ login_form.password.id_for_label }}" class="form-label">Contraseña</label>
    {{ login_form.password }}
  </div>

  <!-- 顶部统一错误提示，红色样式 -->
  {% if login_form.errors %}
    <div class="alert alert-danger mb-3">
      <ul class="mb-0">
        {% for field_errors in login_form.errors.values %}
          {% for error in field_errors %}
            <li>{{ error|escape }}</li>
          {% endfor %}
        {% endfor %}
      </ul>
    </div>
  {% endif %}

  <div class="modal-footer">
    <button type="submit" class="btn btn-primary">Ingresar</button>
  </div>
</form>

2. 简化视图代码（可选） #

视图中无需单独传递errors上下文，直接使用login_form即可，简化后的views.py：

def login_view(request):
    if request.method == 'POST':
        login_form = LoginForm(request, data=request.POST)
        if login_form.is_valid():
            username = login_form.cleaned_data.get('username')
            password = login_form.cleaned_data.get('password')
            user = authenticate(request, username=username, password=password)
            if user is not None:
                login(request, user, backend='django.contrib.auth.backends.ModelBackend')
                return HttpResponse(status=204, headers={'HX-Trigger': 'user_logged_in'})
        # 直接传递带错误的login_form即可
        return render(request, "account/email/login_form.html", {'login_form': login_form})

    else:
        login_form = LoginForm(request)
        return render(request, "account/email/login_form.html", {'login_form': login_form})

效果说明 #

• 提交无效信息时，所有错误（包括字段错误和全局错误）会统一显示在表单顶部的红色区域，不会重复。
• HTMX提交后，页面会自动更新错误提示，无需刷新整个页面。

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