如何在Bootstrap模态框中显示登录表单的错误信息

先梳理下你现有代码里的几个小问题，咱们一步步修正并把功能补全：

1. 修正模态框ID与JS的匹配问题 #

你的模态框ID是loginform，但JS里调用的是$('#messageModal').modal('show')——这会导致找不到模态框元素，直接把JS里的选择器改成和模态框ID一致就行：

<script>
$('#loginform').on('form-errors', function (e) {
  // Show the message modal
  $('#loginform').modal('show');
});
</script>

2. 服务器端验证失败时自动弹出模态框 #

如果是表单提交后服务器端验证失败、页面重新加载的场景，咱们可以在页面加载完成时自动检查是否存在错误，有错误就直接弹出模态框：

<script>
$(document).ready(function() {
  // 检查错误列表是否有内容，有则显示模态框
  if ($('.form-errors li').length > 0) {
    $('#loginform').modal('show');
  }
});
</script>

3. 修正模态框按钮的逻辑问题 #

模态框里的Ok按钮是type="submit"，这会意外触发表单提交，不符合“关闭模态框”的预期，把它改成普通按钮并绑定关闭事件：

<div class="modal-footer">
  <button type="button" class="btn btn-success" data-dismiss="modal">Ok</button>
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>

4. （可选）支持AJAX无刷新提交表单并显示错误 #

如果想避免页面刷新，用AJAX提交表单的话，可以这么处理：
首先给登录表单加个ID，比如login-form：

<form id="login-form" method="post">
  {% csrf_token %}
  <!-- 你的表单字段（用户名、密码等） -->
  <button type="submit" class="btn btn-primary">登录</button>
</form>

然后编写AJAX提交的JS逻辑：

<script>
$(document).ready(function() {
  $('#login-form').submit(function(e) {
    e.preventDefault(); // 阻止默认的页面刷新提交

    $.ajax({
      url: $(this).attr('action'),
      method: $(this).attr('method'),
      data: $(this).serialize(),
      success: function(response) {
        // 登录成功后跳转到目标页面
        window.location.href = '/';
      },
      error: function(xhr) {
        // 解析服务器返回的错误信息
        var errors = xhr.responseJSON;
        var errorHtml = '';
        
        // 渲染全局错误
        if (errors.non_field_errors) {
          errors.non_field_errors.forEach(function(error) {
            errorHtml += '<li>' + error + '</li>';
          });
        }
        // （可选）渲染字段级错误
        for (var field in errors) {
          if (field !== 'non_field_errors') {
            errorHtml += '<li>' + errors[field][0] + '</li>';
          }
        }
        
        // 更新模态框里的错误内容并显示模态框
        $('.form-errors').html(errorHtml);
        $('#loginform').modal('show');
      }
    });
  });
});
</script>

对应的Django视图需要返回JSON格式的错误（示例）：

from django.http import JsonResponse
from django.contrib.auth.forms import AuthenticationForm

def login_view(request):
    if request.method == 'POST':
        form = AuthenticationForm(request, data=request.POST)
        if form.is_valid():
            # 处理登录逻辑（比如登录用户）
            return JsonResponse({'success': True})
        else:
            # 返回错误信息，状态码设为400表示请求错误
            return JsonResponse(form.errors, status=400)
    else:
        form = AuthenticationForm()
    return render(request, 'login.html', {'form': form})

5. 优化错误信息的显示样式 #

给错误列表加一点样式，让它更直观：

.form-errors li {
  color: #dc3545;
  list-style-type: none;
  margin-bottom: 8px;
  padding-left: 0;
}

这样调整后，不管是服务器端刷新返回错误，还是AJAX无刷新提交错误，都能正确用Bootstrap模态框展示错误信息了。

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