Как отображать форму в модальном окне при вводе некорректных данных?

Question

[Baoo]

Использую 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/, отображается одинокая форма без стилей с той же ошибкой:


Подскажите пожалуйста, с чем это может быть связано?
CSRF-токен проверял в devtools, он не меняется.
Странно, что в первый раз всё хорошо, а во второй всё ломается, может есть какие-то отличия в этих событиях, которые я не замечаю?

Answer 1

[MrColdCoffee]

Бегло глянул
Получается что если если данные были невалидными, то Вы

success: function(response) {
                        if (response.indexOf('alert-danger') === -1) {
                            location.reload();
                        } else {
                           //Проваливаетесь сюда
                            $('#loginModal .modal-body').html(response);
                          //в response у Вас что?  Форма входа с выведенной ошибкой??
                          //А где обработчик события sabmit "уже новой" формы? Вот и получается что пост выполняется по указанному пути.
                        }
                    },

Comments

[Baoo]

Спасибо большое, добавил обработчик и всё заработало:

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

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

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

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

            $.ajax({
                url: loginUrl,
                type: 'POST',
                data: formData,
                headers: {
                    'X-CSRFToken': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function(response) {
                    if (response.indexOf('alert-danger') === -1) {
                        location.reload();
                    } else {
                        $('#loginModal .modal-body').html(response);
                        bindFormSubmit();
                    }
                },
                error: function() {
                    alert('Ошибка при входе в систему.');
                }
            });
        });
    }

    $.ajax({
        url: loginUrl,
        type: 'GET',
        success: function(response) {
            $('#loginModal .modal-body').html(response);
            $('#loginModal').modal('show');
            bindFormSubmit();
        },
        error: function() {
            alert('Ошибка при загрузке формы.');
        }
    });
});