Проверка форм Django с помощью Ajax

Блог Полезное

Проверка форм Django с помощью Ajax

Проверка форм Django с помощью Ajax

Есть очень много вариантов как использовать Ajax на своем сайте. В этой статье мы расскажем, как использовать Ajax для проверки полей форм в фреймворке Django. 

Ajax и Django. Шаблон

Напишем наш базовый шаблон от которого будем наследоваться, base.html:


<!DOCTYPE html>
<html lang="ru">

<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<header>{% include 'core/includes/_navbar.html' %}</header>
<body>

<div class="container">
<div class="row">
<div class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% block javascript %}
{% endblock %}
</body>
</html>

Подключение библиотеки jquery обязательно для использования Ajax.  У нас имеются два блока, это content и javascript, в первый будем писать форму, во второй код javascript.

Создание предстваления

Создадим форму регистрации и добавим проверку поля email на уже существующие email в базе. Наша форма будет содержать 4 поля (email, username, password, confirm). 

views.py:


class AddAccount(CreateView):
model = Account
form_class = AddAccountForm
success_url = '/accounts/profile'

 

urls.py:


url(r'^ajax/validate_email/$', views.validate_email, name='validate_email'),

 signup.html:


{% extends "base.html" %}
{% load widget_tweaks %}
{% load i18n %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}
<h1>{% trans "Sign Up" %}</h1>

<p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>

<form class="signup" id="signup_form" method="post" data-validate-username-url="{% url 'validate_email' %}" action="{% url 'account_signup' %}">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<label for="{{field.label}}">{{field.label}}</label>
{{ field|add_class:"form-control" }}
{{field.errors}}
</div>
{% endfor %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button type="submit" class="btn btn-primary">{% trans "Sign Up" %} &raquo;</button>
</form>
{% endblock %}

Выглядит это так:

 

Работа с Ajax

Нам нужно работать с полей email, вытаскиваем его id, используя правую кнопку мыши и открыв отладчик. ID у нашего поля "id_email" с ним и будем работать. Добавим в наш файл signup.html:


{% extends 'base.html' %}

{% block javascript %}
<script>
$("#id_email").change(function () {
console.log( $(this).val() );
});
</script>
{% endblock %}

Теперь можете проверить, что будет в отладчике, а именно в консоли отладчике.

Теперь напишем представление.

views.py:



from django.http import JsonResponse

def validate_email(request):
email = request.GET.get('email')
data = {
'Yes': User.objects.filter(email__iexact=email).exists()
}
return JsonResponse(data)

Пропишем путь

urls.py:

r'^ajax/validate_username/$'

Немного изменим наш шаблон

signup.html:


{% extends 'base.html' %}

{% block javascript %}
<script>
$("#id_email").change(function () {
var email = $(this).val();

$.ajax({
url: '/ajax/validate_email/',
data: {
'email': email
},
dataType: 'json',
success: function (data) {
if (data.yes) {
alert("Пользователь с таким email уже существует!");
}
}
});

});
</script>
{% endblock %}

Теперь, когда вы попробуете ввести существующий email, появится алерт.

Немного улучшим наш пример и добавим проверку при попытке отправить форму. 

views.py:



from django.http import JsonResponse

def validate_email(request):
email = request.GET.get('email')
data = {
'Yes': User.objects.filter(email__iexact=email).exists()
}
  if data['Yes']:
  data['message']:'Пользователь с таким email уже существует!'
return JsonResponse(data)

Мы добавили сообщение в data и из нее потом его и будем брать. 

signup.html:


{% extends 'base.html' %}

{% block javascript %}
<script>
$("#id_email").change(function () {
var form = $(this).closest("form");
$.ajax({
url: form.attr("data-email-url"),
data: form.serialize(),
dataType: 'json',
success: function (data) {
if (data.yes) {
alert(data.message);
}
}
});

});
</script>
{% endblock %}
{% block content %}
<form method="post" data-email-url="{% url 'validate_email' %}">
...
</form>
{% endblock %}

Теперь Ajax сработает в Django при попытке отправки формы. Разработка сайтов на django.