Валидация формы авторизации/регистрации в Django без обновления страницы
У меня есть шаблон авторизации, в котором левая часть отвечает за авторизацию, а правая за регистрацию login.html
<!-- Регистрация -->
<div class="form-container sign-up-container">
<form class="form-control-login" action="{% url 'user:registration' %}" method="post" id="registration-form">
{% csrf_token %}
<h1>Регистрация</h1>
<div class="social-container">
<a href="#" class="social">
<i class="fab fa-google-plus-g">
<img src="{% static 'icons/vk.svg' %}" alt="vkontakte" width="38" height="38">
</i>
</a>
<a href="#" class="social">
<i class="fab fa-facebook-f">
<img src="{% static 'icons/odnoclassniki.svg' %}" alt="odnoclassniki" width="38" height="38">
</i>
</a>
<a href="#" class="social">
<i class="fab fa-linkedin-in">
<img src="{% static 'icons/google.svg' %}" alt="google" width="38" height="38">
</i>
</a>
</div>
<span>или используйте свой адрес электронной почты для регистрации</span>
<label for="id_email" class="form-label"></label>
<input type="email" class="form-input" name="email"
value="{% if form.email.value %}{{ form.email.value }}{% endif %}"
id="id_email" placeholder="Телефон или почта" required>
{% if form.email.errors %}
<div style="color:red">{{ form.email.errors }}</div>
{% endif %}
<label for="id_first_name" class="form-label"></label>
<input type="text" class="form-input" name="first_name"
value="{% if form.first_name.value %}{{ form.first_name.value }}{% endif %}"
id="id_first_name" placeholder="Введите ваше имя" required>
{% if form.first_name.errors %}
<div style="color:red">{{ form.first_name.errors }}</div>
{% endif %}
<label for="id_last_name" class="form-label"></label>
<input type="text" class="form-input" name="last_name"
value="{% if form.last_name.value %}{{ form.last_name.value }}{% endif %}"
id="id_last_name" placeholder="Введите вашу фамилию" required>
{% if form.last_name.errors %}
<div style="color:red">{{ form.last_name.errors }}</div>
{% endif %}
<label for="id_username" class="form-label"></label>
<input type="text" class="form-input" name="username"
value="{% if form.username.value %}{{ form.username.value }}{% endif %}"
id="id_username" placeholder="Введите ваш username" required>
{% if form.username.errors %}
<div style="color:red">{{ form.username.errors }}</div>
{% endif %}
<label for="id_password1" class="form-label"></label>
<input type="password" class="form-input" name="password1"
value="{% if form.password1.value %}{{ form.password1.value }}{% endif %}"
id="id_password1" placeholder="Введите ваш пароль" required>
{% if form.password1.errors %}
<div style="color:red">{{ form.password1.errors }}</div>
{% endif %}
<label for="id_password2" class="form-label"></label>
<input type="password" class="form-input" name="password2"
value="{% if form.password2.value %}{{ form.password2.value }}{% endif %}"
id="id_password2" placeholder="Подтвердите пароль" required>
{% if form.password2.errors %}
<div style="color:red">{{ form.password2.errors }}</div>
{% endif %}
<button type="submit">Регистрация</button>
</form>
<script>
$(document).on('submit', '#registration-form', function (e) {
e.preventDefault();
$.ajax({
url: '/user/login/',
type: 'POST',
dataType: 'json',
data: {
email: $('#id_email').val(),
first_name: $('#id_first_name').val(),
last_name: $('#id_last_name').val(),
username: $('#id_username').val(),
password1: $('#id_password1').val(),
password2: $('#id_password2').val(),
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
},
success: function (data){
$('#success').html(data)
},
})
})
</script>
</div>
<!-- Авторизация -->
<div class="form-container sign-in-container">
<form class="form-control-login" action="{% url 'user:login' %}" method="post">
{% csrf_token %}
{% if request.GET.next %}
<input type="hidden" name="next" value="{{ request.GET.next }}">
{% endif %}
{{ form.non_field_errors }}
<h1>Вход</h1>
<div class="social-container">
<a href="#" class="social">
<i class="fab fa-google-plus-g">
<img src="{% static 'icons/vk.svg' %}" alt="vkontakte" width="38" height="38">
</i>
</a>
<a href="#" class="social">
<i class="fab fa-facebook-f">
<img src="{% static 'icons/odnoclassniki.svg' %}" alt="odnoclassniki" width="38" height="38">
</i>
</a>
<a href="#" class="social">
<i class="fab fa-linkedin-in">
<img src="{% static 'icons/google.svg' %}" alt="google" width="38" height="38">
</i>
</a>
</div>
<label for="id_email" class="form-label"></label>
<input type="email" class="form-input" name="username"
id="id_email" placeholder="Телефон или почта" required>
<label for="id_password" class="form-label"></label>
<input type="password" class="form-input" name="password"
id="id_password" placeholder="Пароль" required>
<a href="#">Забыли пароль?</a>
<button type="submit">Вход</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Добро пожаловать!</h1>
<p>Пожалуйста, войдите, используя свои личные данные.</p>
<button class="ghost" id="signIn">Вход</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Привет, Друг!</h1>
<p>Введите свои личные данные и начните арендовать вместе с нами</p>
<button class="ghost" id="signUp">Регистрация</button>
</div>
</div>
</div>
</div>
<div class="pop-up-close" id="pop-up-close">✖</div>
</div>
</div>
</div>
</div>
Перемещение между формами происходит с помощью javascript
Все находится на маршруте user/login
from django.urls import path
from users import views
app_name = 'users'
urlpatterns = [
path('login/', views.login, name='login'),
path('registration/', views.registration, name='registration'),
path('profile/', views.profile, name='profile'),
path('logout/', views.logout, name='logout'),
]
При неверном вводе данных при регистрации, страница обновляется и пользователю придется опять сдвигать шаблон на регистрацию, помогите настроить так чтобы не происходило обновления страницы
Вот views.py
def login(request):
if request.method == 'POST':
form = UserLoginForm(data=request.POST)
if form.is_valid():
username = request.POST['username']
password = request.POST['password']
user = auth.authenticate(username=username, password=password)
if user:
auth.login(request, user)
if request.POST.get('next', None):
return HttpResponseRedirect(request.POST.get('next'))
return HttpResponseRedirect(reverse('main:index'))
else:
form = UserLoginForm()
context: dict = {
'title': 'Lendme - Авторизация',
'form': form
}
return render(
request,
template_name='users/login.html',
context=context
)
def registration(request):
if request.method == 'POST':
form = UserRegistrationForm(data=request.POST)
if form.is_valid():
form.save()
user = form.instance
auth.login(request, user)
return HttpResponseRedirect(reverse('main:index'))
else:
form = UserRegistrationForm()
context: dict = {
'title': 'Lendme - Регистрация',
'form': form,
}
return render(
request,
template_name='users/login.html',
context=context
)