Как предотвратить скрытие Modal при отправке, если в форме есть ошибка? (Django, js)
При регистрации выскакивает модальное окно. После отправки post-запроса пользователя отправляет по адресу ..registrate/, где происходит обработка заброса через вью RegisterView. Однако после этого перенаправления модальное окно закрывается вне зависимости от того были ли ошибки или нет. Как оставить открытым модальное окно, если валидация не прошла?
Про такое решение {% if form.errors %}modal-active{% endif %} я прочитал. Оно не помогает. У меня пустое окно открывается.
Если <div class="header__slide-modal-window" id="empty-pic" data-window></div> заменить на
<div class="header__slide-modal-window" id="empty-pic" data-window="{% if form.errors %}2{% endif %}"></div>
то модальное окно также остается открытым, но оно пустое.
Код HTML
<!-- Шаблон модального окна -->
<div class="swiper-section-modal {% if form.errors %}modal-active{% endif %}" data-modal>
<div class="swiper-section-modal__content">
<div class="swiper-section-modal__content-right">
<button class="close btn-reset"></button>
<div class="header__slide-modal-window" id="empty-pic" data-window></div>
</div>
</div>
</div>
...
{% if not request.user.is_authenticated %}
<button class="header__top-widgets-link swiper-slide btn-reset">
Login
<div class="header__slide-modal-content" id="1" data-content="1">
<h2 class="header__slide-modal-content-title title">Login</h2>
<p class="header__slide-modal-content-name">New to site? <a id="pop_signup" href="">Create an Account</a></p>
<form class="header__slide-modal-content-login-form" method="post" action="{% url 'login' %}">
{% csrf_token %}
<input type="text" class="login-username" autofocus="true" required="true" placeholder="Username" name="username" />
<input type="password" class="login-password" required="true" placeholder="Password" name="password" />
<input type="submit" name="Login" value="Login" class="btn btn-reset" />
</form>
<a href="{% url 'restore_password' %}" class="login-forgot-pass">Lost password?</a>
</div>
</button>
<button class="header__top-widgets-link swiper-slide btn-reset">
Register
<div class="header__slide-modal-content" id="2" data-content="2">
<h2 class="header__slide-modal-content-title title">Register</h2>
<p class="header__slide-modal-content-name">Already have an account? <a id="pop_login" href="">Login</a></p>
<form class="header__slide-modal-content-register-form" method="post" action="{% url 'register' %}">
{% csrf_token %}
{% for f in form %}
<p><label class="login-username" for="{{ f.id_for_label }}">{{f.label}}:</label>{{ f }}</p>
<div class="">{{ f.errors }}</div>
{% endfor %}
<input type="submit" name="Register" value="Register" class="btn btn-reset" />
</form>
</div>
</button>
скрипт js
(() => {
let swiperSlides = document.querySelector(".header__container").querySelectorAll(".swiper-slide");
let modal = document.querySelector(".swiper-section-modal");
let modalBtn = modal.querySelector(".close");
let html = document.documentElement;
//сохраним текущую прокрутку:
console.log(swiperSlides[0])
var scrollPosition = swiperSlides[0].getBoundingClientRect().top;
console.log(scrollPosition)
swiperSlides.forEach(el => {
el.addEventListener("click", function() {
let img = this.querySelector("img");
let content = this.querySelector("div");
let name = content.getAttribute("data-content");
let scrollPosition = window.pageYOffset;
var cont_div1 = document.getElementById(name);
var cont_div2 = document.getElementById("empty-pic");
cont_div2.innerHTML = cont_div1.innerHTML;
animation(modal, "modal-active", "play");
modal.querySelector(".header__slide-modal-window").setAttribute("data-window", name);
//блокировка страницы
window.scrollTo(0, scrollPosition);
html.classList.add("hystmodal__opened");
})
})
modalBtn.addEventListener("click", function() {
animation(modal, "modal-active", "reverse");
//разблокировка страницы
html.classList.remove("hystmodal__opened");
console.log(scrollPosition);
window.scrollTo(0, scrollPosition);
});
window.onclick = function (event) {
if (event.target.hasAttribute('data-modal')) {
animation(modal, "modal-active", "reverse");
event.target.style.display = "none";
//разблокировка страницы
html.classList.remove("hystmodal__opened");
window.scrollTo(0, scrollPosition);
}
};
function animation(el, Class, flag) {
if (flag === "play") {
el.style.display = "flex";
setTimeout(function() {
el.classList.add(Class);
}, 50)
} else if (flag === "reverse") {
el.classList.remove(Class);
setTimeout(function() {
el.style.display = "none";
}, 700)
}
};
})();
urls.py
urlpatterns = [
path('restore_password/', WebPasswordResetView.as_view(), name='restore_password'),
path('register/', RegisterView.as_view(), name='register'),
]
view.py
class BaseView(TemplateView):
template_name = 'app_products/index.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['profile'] = Profile.objects.filter(user_id=self.request.user.id).first()
context['form'] = ExtendedRegisterForm()
return context
class RegisterView(CreateView):
""" Представление для регистрации """
form_class = ExtendedRegisterForm
template_name = 'app_products/index.html'
def form_valid(self, form):
user = form.save()
login(self.request, user)
print(form.cleaned_data.get('username'))
Profile.objects.create(
user=user,
slug=form.cleaned_data.get('username'),
email=form.cleaned_data.get('email'),
)
return redirect('/')
[! То, что я получаю после отправки с ошибками]2
[1]: https://i.stack.imgur.com/Qw4Ql.png][2]][2]