Логотип библиотеки ITFroms валидации HTML-форм

ITForms — валидация HTML-форм

Расширенный набор элементов. Комплексная валидация формы на стороне клиента. AJAX-проверка CAPTCHA и уникальных полей. Скоро будет шифрование данных по открытому ключу.

Зачем нужна ITForms

  1. Заявка с сайта пришла c телефонным номером, в котором явно не хватает одной цифры или наоборот на одну цифру больше.
  2. Приходилось вам вводить вместо русской буквы "с" английскую? В результате данные невозможно найти. А пароль с пробелом лишним копировали и вставляли?
  3. Вы долго заполняли форму на сайте, в конце ввели код, нажали Отправить и в ответ получили: "Вы неправильно ввели защитный код". Вы вернулись назад, а данные все слетели и форму нужно заполнять заново.
  4. В фильтре каталога вы выбрали всего один параметр и перешли на страницу с очень длинным и непонятным URL.
  5. Но самое главное — нам в веб-студии ITSoft нужен один инструмент, чтобы в каждом проекте был одинаковый код, а не заплатки на каждый конкретный случай. Одинаковое должно одинаково реализовываться. ITForms экономит время разработки.
Эти и многие другие проблемы позволяет решить ITForms. ITForms делает интернет более безопасным и надежным, сокращает количество ошибок, экономит время. HTML-формы без жесткой валидации — это прошлый век. Многие ошибки ввода данных можно предотвратить автоматически.

А не велосипед ли мы изобрели?

К разработке собственной библиотеки ITForms.js нас побудили недостатки библиотеки zforms.ru:

  1. Отсутствие исходного кода для внесения изменений. В результате нестандартное поведение формы реализовать невозможно.
  2. Невозможность повесить пользовательскую функцию для проверки значения поля input на событие onChange. Такая необходимость нужна для проверки значения CAPTCHA. Если AJAX-функция будет отправлять запрос по событию onKeyUP, т.е. после ввода каждого символа форма будет подвисать пока не получит ответ от сервера.
  3. Зависимость zforms от внешнего громоздкого оформления полей ввода в обертки посторонних тэгов dt dl. Так, например, чтобы вывести подсказу нужно вывести <dd class="zf-hint"><i class="zf-arrow"></i>Представтесь, пожалуйста</dd>
  4. Громоздкая и неудобная передача параметров в виде объектов javascript. Например, так onclick="return { oOptions : { sPlaceHolder : 'не более 10 символов', iMaxLength : 10 } }"
  5. Пользовательская функция проверки ввода в zForms вызывается два раза при вводе каждого символа
Плагины jQuery (validation, jqueryvalidate) не подходят тем, что:
  1. требуют от веб-мастера знаний JavaScript и jQuery;
  2. предназначены только для валидации, в то время как нам нужны еще:
    1. новые элементы ввода;
    2. возможность посылать значения чекбоксов в формате csv или как сумму;
    3. возможность не посылать значения незаполненных элементов фильтра в целях читабельности и экономии места в URL;
    4. возможность шифровать данные, например, пароль в целях защиты от перехвата;
  3. Плагин jQuery Validate дает свободу для творчества, т.е. в каждом проекте веб-мастер на jQuery Validate напишет, что-то свое. А если в веб-студии работает несколько веб-мастеров или прошло время и веб-мастер, который делал проект уволился, то другому веб-мастеру придется разбираться с самописным кодом. А ITForms стандартизирует большинство типовых операций с формами.
HTML5 можно использовать совместно с ITForms, но:
  1. возможности HTML5 поддерживаются не всеми браузерами;
  2. в HTML5 нет возможности задать сообщение о несоответствии регулярному выражению (data-regexp-err-msg), нет data-dont-send-empty-fields, data-enable-chars, data-minselected, data-maxselected, data-async, возможности склеивать поля, посылать значения чекбоксов в формате csv или суммы значений.

Итак, что предлагем мы:

  1. Библиотеку ITForms.class.js с понятным открытым исходным кодом, в который можно внести легко изменения.
  2. Почти все настройки задаются в виде атрибутов HTML-тегов input и select. Теперь не надо бояться ошибиться в синтаксисе JavaScript с множеством фигурных скобок, кавычек и точек с запятыми.
  3. HTML-код соответсвует стандарту HTML5 и проходит валидацию см. http://validator.w3.org/check?uri=http%3A%2F%2Fitforms.ru%2F
  4. По событию onKeyup проверяются только быстрые проверки, которые не замедляют ввод. Ресурсоемкие проверки делаются по onChange, например, проверка ввода CAPTCHA. См. атрибут data-async.
  5. Функциональность формы не зависит от внешнего оформления! Вы можете оформлять элементы ввода как угодно.
  6. Возможность отправить группу checkbox'ов в компактном виде (см. пример ниже).
  7. Возможность склеить значения нескольких элементов ввода в один параметр (см. функцию addMergeableField).
  8. Возможность не отправлять на сервер незаполненные поля фильтра. Очень удобно при отправке методом GET. В строке запроса вы видите только заданные параметры.
  9. Список допустимых для ввода символов. Прочие символы ввести с клаиатуры не получится. Но их можно перетащить мышкой. Поэтому regexp не забывайте прописывать.
  10. Возможность проверять значение на уникальность AJAX-запросом.
И это не все!

TODO (ближайшие планы)

  1. Шифрование отдельных полей по открытому ключу. Полезно для форм авторизации. Пароль на сервер полетит в зашифрованном виде.
  2. grid (таблица как в excel).
  3. RGB (выбор цвета и прозрачности).
  4. WYSIWYG-редактор BBCode с проверкой валидности.
Присылайте свои идеи, поставим в план.

Цель проекта ITForms

Создать библиотеку свободно распространяемую с открытым исходным кодом, которая бы существенно повысила безопасность и удосбтво веб-интерфейсов (HTML-форм) сайтов.






Пример формы

Файл с демонстрационной формой
Числа от 0.53 до 99.13:
Тестовое поле:
ОГРН(ИП) (гос. рег. номер юрлица):
ИНН (индивидуальный номер налогоплатильщика):
Номер счета в банке:
Русский текст: *
Login (с проверкой на уникальность): *
Пароль: * Показать пароль
textarea:
Дата: *
Время:
Дата и время:
Комбобокс:
Чекбоксы классические
посылаются в виде
paramname[]=v1paramname[]=v2 *
Чекбоксы классические




Чекбоксы посылаемые
в виде paramname=v1,v2,v3 *
Чекбоксы посылаемые в виде строки




Значания чекбоксов
суммируются бинарно (операция побитового сложения) и посылается
paramname=sum *
(необходимо для работы
с бинарными свойствами,
когда каждое значение
чекбокса является
степенью двойки.)
Сумма чекбоксов




Радио: *


Селект: *
Селект size: *
Файл (jpg, png): *
О слайдерах важно помнить, что их нельзя использовать когда ширина слайдера в пикселях меньше, чем количество возможных значений. Например, для указания стоимости товара в диапазоне от 0 рублей до 100 000 рублей. Слайдер шириной в 100 000 пикселей испортит все.
Возраст: *:
Возраст в диапазоне: *: от и до
Вертикальный слайдер с шагом 3: *:
Рост в диапазоне: *:
от и до
Число как базовый тип от 0.53 до 99.13:
Login как базовый тип: *
Введите код с картинки: * [ Другую картинку ] CAPTCHA Image

Дистрибутив

Русский язык. Языковой файл подключать для itform.class.js
Исходный код библиотеки itforms.class.js
Стили itforms.css
Картинка справки
Иконка справки

Для работы необходим дистрибутив jQuery-UI с компонентами: Core, Widget, Mouse, Position, Autocomlete, Button, Slider, Datepicker.

Для работы timepicker & datetimepicker нужна библиотека jquery-ui-timepicker-addon.js

Атрибуты ITForms-формы

  1. <form ... data-dont-send-empty-fields=1> — Если data-dont-send-empty-fields=true в тэге form, то перед отправкой будут удалены все незаполненные поля ввода. Очень удобно для фильтров поиска, когда информация передается методом GET.
  2. <input ... data-min-length — минимальное количество символов для текстовых полей. data-min-length=1 означает по сути, что поле обязательно к заполнению.
  3. <input ... data-regexp — проверка текстового поля на регулярное выражение.
  4. <input ... data-enable-chars — список допустимых символов, прочие символы с клавиатыры ввести не получится.
  5. <input ... data-placeholder — устанавливает Placeholder в текстовое поле. Отличается от стандартной реализации HTML5 тем, что если в поле ввести символы и потом установить пустое значение, то data-placeholder показываться не будет дабы не смущать пользователя. У вас есть выбор какое поведение выбирать стандартное — placeholder или data-placeholder.
  6. <input|select ... data-help — создает всплывающую подсказку при установке фокуса на текстовое поле.
  7. <select ... data-combobox — установить для текущего списка комбобокс.
  8. <input ... data-min-value — минимальное значение числа и даты;
  9. <input ... data-max-value — максимальное значение числа и даты;
  10. <select multiple="multiple" ... data-min-selected — минимальное количество выбранных элементов в select-multiple.
  11. <select multiple="multiple" ... data-max-selected — максимальное количество выбранных элементов в select-multiple.
  12. <input type=file ... data-file-type — тип загружаемых файлов. Может быть указано несколько типов через запятую.
  13. <input|select ... data-user-func - вызов пользовательской функции для дополнительной проверки. Пользовательская функция возвращает сообщение об ошибке или пустую строку в случае успешной проверки. Пользовательская функция может проверять валидность поля в зависимости от значений других полей формы. Также она может динамически в зависимости от значения поля подгружать AJAX'ом новые новые поля формы, данные, изменять другие поля формы. Пример: data-user-func="funcAlert('1 параметр','2 параметр');"
  14. <input ... data-datepicker|data-datetimepicker|date-timepicker — устанавливаем для текущего поля один из трех календарей.
  15. <input ... data-async — Если data-async=true, то значение проверяется после ввода каждого символа. Если data-async=false, то значение поля проверяется после снятия с него фокуса или перед отправкой.
  16. <input ... data-slider — привязываем ползунок. Детальнее смотрите пример.
  17. <input ... data-regexp-err-msg — сообщение об ошибке в случае несоответствия регулярному выражению.
  18. <input ... data-type= Один из базовых типов: number, integer, negative, ip, login, password, phone, date, datetime, time, ogrn, inn,kpp, bik, bankaccount. Для базовых типов уже заданы data-regexp, data-regexp-err-msg, data-enable-chars. Но вы можете переопредлить эти значения. Полный список базовых типов и заданные им регулярные выражения, сообщения об ошибках и разрешенные для ввода символы см. в itform.class.js.

Архитектура ITForms.class.js

Публичные методы

См. исходный код. Вешаются обработчики событий на каждый элемент формы. Вешается обработчик события на onSubmit. Далее см. обработчики событий. Если будут вопросы задавайте в комментариях.

Полезные рецепты

На любое поле можно повесить свою пользовательскую функцию, которая будет выполнять определенные действия. Например, $('#select').bind('change', userfuncion); И пользовательская функция отображает или скрывает какие-то элементы в зависимости от выбранных значений.

Если нужно пользовательскую функцию увязать в общий контекст проверок, чтобы она вызывалась при попытке отправить форму или при изменении занчения поля, то ее имя надо задать в атрибуте data-user-func. Например, data-user-func="ufunc();". Пользовательская функция в случае успешной проверки не должна ничего возвращать, а в случаи ошибки возвращает текст сообщения об ошибке.

Возможность расширять список базовых типов не меняя код itforms.class.js

До вызова var itform = new ITForm($('#form1')); добавьте свои базовые типы по образцу:
itform_types['number'] = {regexp:"/^[0-9]*?\.?[0-9]+$/", errmsg:"Значение должно соответствовать формату числа с плавующей точкой.", enablechars: "/^[0-9+\-\.]$/"};

Подключение других языков

Берете файлик /itcms4/common/itforms/itforms-lang.ru.js и переводите. Файл с английской версией /itcms4/common/itforms/itforms-lang.en.js. Переводы на остальные основные языки планиурем сделать до конца месяца.

Проверка пароля при регистрации

В форме делаем второе поле "Подтверждение пароля" с id='pwd_confirmation'. Для первого и второго поля ввода паролей вешаем пользовательскую функцию userFunc='pwdConfirmation();'. 
function pwdConfirmation()
{
 if($('#mypwd')[0].value && !$('#pwd_confirmation')[0].value)
  return 'Подтвердите пароль';
 else if($('#mypwd')[0].value!=$('#pwd_confirmation'))
  return 'Подтверждение пароля не совпадает.';
  return '';
}
Поделиться ссылочкой:

Комментарии

пользователей Facebook

пользователей vKontakte