输入错误数据时如何在模式窗口中显示表单？

我正在使用 Django 4.2.16 和 Bootstrap 4.6.2

我做什么：当您单击“登录”按钮时：

<a id="login" data-url="{% url 'login' %}" data-csrf-token="{{ csrf_token }}" class="nav-link">Войти</a>

脚本：

$('#login').click(function (event) {
    event.preventDefault();

    let loginUrl = $(this).data('url');
    let csrfToken = $(this).data('csrf-token');

    $.ajax({
        url: loginUrl,
        type: 'GET',
        success: function (response) {
            $('#loginModal .modal-body').html(response);
            $('#loginModal').modal('show');

            $('#loginModal form').submit(function(event) {
                event.preventDefault();

                let formData = $(this).serialize();

                $.ajax({
                    url: loginUrl,
                    type: 'POST',
                    data: formData + '&csrfmiddlewaretoken=' + csrfToken,
                    success: function(response) {
                        if (response.indexOf('alert-danger') === -1) {
                            location.reload();
                        } else {
                            $('#loginModal .modal-body').html(response);
                        }
                    },
                    error: function() {
                        alert('Ошибка при входе в систему.');
                    }
                });
            });
        },
        error: function() {
            alert('Ошибка при загрузке формы.');
        }
    });
});

向服务器发送请求，获取登录表单的html代码，如下所示：

之后，它拦截“登录”按钮的点击，向服务器发送请求，这样如果发送了无效数据，它会立即在模态窗口中显示错误，如下所示：

之后我再次提交带有无效数据的表单。

我的期望：如果存在无限数量的无效数据条目，模式窗口将继续显示错误。

我得到的结果：整个页面转到http://127.0.0.1:8000/accounts/login/，没有样式的单个表单显示相同的错误：

请告诉我这可能与什么有关？我在devtools中检查了CSRF令牌，它没有改变。奇怪的是，第一次一切都很好，但第二次一切都崩溃了，也许这些事件有一些我没有注意到的差异？