May 5 2011 at 14:53

Валидация формы при помощи jQuery Tools на клиенте в Django

Invite pending

HTML5 — технология, которая сильно упрощает жизнь веб разработчиков, а также их клиентов. Django — фреймворк, который часто выполняет те же функции. В своем первом посте я попытаюсь использовать две эти технологии вместе. Ниже я приведу способ, который позволяет в Django быстро генерировать формы, которые проверяются на клиенте при помощи jQuery Tools.
Часто случается проверять формы не только на стороне сервера, но и на стороне клиента. До определенного момента, мне приходилось каждый раз дописывать несколько строк в штатный java script файл, чтобы определить поля формы, которые необходимо подвергнуть валидации. В конце концов это порядком надоело. Я стал искать способы для автоматизации этого процесса. По многим причинам, самым логичным мне показалось использование библиотеки jQuery Tools. Подробности ниже.
Классическим примером формы является форма обратной связи. Поэтому постараюсь ниже реализовать её с проверкой правильности заполнения на клиенте, так как проверка на сервере реализуется встроенными средствами django.
Итак, создаем новое приложение. Описывать весь процесс создания нового приложения не вижу смысла, поскольку в сети можно найти невероятное количество всевозможных руководств и рекомендаций по этому вопросу.
Библиотека jQuery Tools состоит из нескольких частей, каждая из которых в общем случае не связана с другой. Это значит, что вместо подключения всей громадной библиотеки, можно подключить отдельные модули. В нашем же случае, мы подгружаем всю библиотеку с официального сайта jQuery Tools. Стили и картинки, кстати, тоже берем оттуда, чтобы не захламлять репозиторий.
Файл основного шаблона:


<!DOCTYPE html>
<html>
<head>
    <title>Some example</title>
    <script src="ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="cdn.jquerytools.org/1.2.5/form/jquery.tools.min.js"></script>
    <link rel="stylesheet" type="text/css" href="static.flowplayer.org/tools/css/standalone.css"/>
    <link rel="stylesheet" type="text/css" href="static.flowplayer.org/tools/demos/validator/css/form.css"/>
</head>
<body>
<form id="myform" method="POST">
    {% csrf_token %}
    <fieldset>
        <h3>Simple form</h3>
        {{ form.as_p }}
        <button type="submit">Submit form</button>
        <button type="reset">Reset</button>
    </fieldset>
</form>
<script>
    $(document).ready(function() {
        $("#myform").validator();
    });
</script>
</body>
</html>




Валидация jQuery Tools основана на новых типах полей форм, принятых в html5, таких как number, email и url, и их атрибутах: min, max, required и pattern.

Этим мы и постараемся воспользоваться в файле widget.py. 


# -*- coding: utf-8 -*-
from django import forms
from django.forms.widgets import Input
 
#Создаем виджет, в котором динамически переопределяем значение атрибута input_type.
#Это нужно для того,чтобы элемент нашей формы стал принял вид: <input type="мой тип">
class InputGenerator(Input):
 def __init__(self, type='text', attrs='',*args, **kwargs):
 self.input_type = type
 super(InputGenerator, self).__init__(attrs,*args, **kwargs)
 
#Переопределяем стандартный виджет для поля , при этом в конструктор передаем необходимые для валидации на
# клиентской стороне атрибуты, а также тип создаваемого поля согласно документации jquery tools
 
class EmailField(forms.EmailField):
 widget = InputGenerator(attrs={'required': 'true'}, type='email')
 
class TelField(forms.CharField):
 widget = InputGenerator(attrs={'required': 'true', 'pattern':'^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$'},
                  type='tel')
class TextField(forms.CharField):
 widget = InputGenerator(attrs={'required': 'true', 'maxlength': '20'}, type='text')




После этого нам остается только воспользоваться созданными только что виджетами в файле forms.py.


# -*- coding: utf-8 -*-
from django import forms
from feedbackapp.widgets import EmailField, TelField, TextField
from feedbackapp.models import Messages
 
 
#Создаем форму
class MessagesForm(forms.ModelForm):
 name = TextField()
 email = EmailField()
 tel =  TelField()
 
 class Meta:
 model = Messages
 




Остальные файлы проекта довольно тривиальны и банальны, поэтому заинтересованные могут смотреть проект на github.

Данный способ помогает каждый раз не думать над валидацией форм на клиенте. 

Достаточно просто определить необходимые виджеты и повторно использовать каждый из них в разных формах.

Hubs:

Lumber room