ITForms — валидация HTML-форм
Расширенный набор элементов. Комплексная валидация формы на стороне клиента. AJAX-проверка CAPTCHA и уникальных полей. Скоро будет шифрование данных по открытому ключу.
Зачем нужна ITForms
- Заявка с сайта пришла c телефонным номером, в котором явно не хватает одной цифры или наоборот на одну цифру больше.
- Приходилось вам вводить вместо русской буквы "с" английскую? В результате данные невозможно найти. А пароль с пробелом лишним копировали и вставляли?
- Вы долго заполняли форму на сайте, в конце ввели код, нажали Отправить и в ответ получили: "Вы неправильно ввели защитный код".
Вы вернулись назад, а данные все слетели и форму нужно заполнять заново.
- В фильтре каталога вы выбрали всего один параметр и перешли на страницу с очень длинным и непонятным URL.
- Но самое главное — нам в веб-студии ITSoft нужен один инструмент, чтобы в каждом проекте был одинаковый код,
а не заплатки на каждый конкретный случай. Одинаковое должно одинаково реализовываться. ITForms экономит время разработки.
Эти и многие другие проблемы позволяет решить ITForms.
ITForms делает интернет более безопасным и надежным, сокращает количество ошибок, экономит время.
HTML-формы без жесткой валидации — это прошлый век. Многие ошибки ввода данных можно предотвратить автоматически.
А не велосипед ли мы изобрели?
К разработке собственной библиотеки ITForms.js нас побудили недостатки библиотеки zforms.ru:
- Отсутствие исходного кода для внесения изменений. В результате нестандартное поведение формы реализовать невозможно.
- Невозможность повесить пользовательскую функцию для проверки значения поля input на событие onChange. Такая необходимость нужна для проверки значения CAPTCHA. Если AJAX-функция будет отправлять запрос по событию onKeyUP, т.е. после ввода каждого символа форма будет подвисать пока не получит ответ от сервера.
- Зависимость zforms от внешнего громоздкого оформления полей ввода в обертки посторонних тэгов dt dl. Так, например, чтобы вывести подсказу нужно вывести <dd class="zf-hint"><i class="zf-arrow"></i>Представтесь, пожалуйста</dd>
- Громоздкая и неудобная передача параметров в виде объектов javascript. Например, так onclick="return { oOptions : { sPlaceHolder : 'не более 10 символов', iMaxLength : 10 } }"
- Пользовательская функция проверки ввода в zForms вызывается два раза при вводе каждого символа
Плагины jQuery (validation, jqueryvalidate) не подходят тем, что:
- требуют от веб-мастера знаний JavaScript и jQuery;
- предназначены только для валидации, в то время как нам нужны еще:
- новые элементы ввода;
- возможность посылать значения чекбоксов в формате csv или как сумму;
- возможность не посылать значения незаполненных элементов фильтра в целях читабельности и экономии места в URL;
- возможность шифровать данные, например, пароль в целях защиты от перехвата;
- Плагин jQuery Validate дает свободу для творчества, т.е. в каждом проекте веб-мастер на jQuery Validate напишет, что-то свое. А если
в веб-студии работает несколько веб-мастеров или прошло время и веб-мастер, который делал проект уволился, то другому веб-мастеру придется
разбираться с самописным кодом. А ITForms стандартизирует большинство типовых операций с формами.
HTML5 можно использовать совместно с ITForms, но:
- возможности HTML5 поддерживаются не всеми браузерами;
- в HTML5 нет возможности задать сообщение о несоответствии регулярному выражению (data-regexp-err-msg), нет data-dont-send-empty-fields, data-enable-chars, data-minselected, data-maxselected,
data-async, возможности склеивать поля, посылать значения чекбоксов в формате csv или суммы значений.
Итак, что предлагем мы:
- Библиотеку ITForms.class.js с понятным открытым исходным кодом, в который можно внести легко изменения.
- Почти все настройки задаются в виде атрибутов HTML-тегов input и select. Теперь не надо бояться ошибиться в синтаксисе JavaScript с множеством фигурных скобок, кавычек и точек с запятыми.
- HTML-код соответсвует стандарту HTML5 и проходит валидацию см. http://validator.w3.org/check?uri=http%3A%2F%2Fitforms.ru%2F
- По событию onKeyup проверяются только быстрые проверки, которые не замедляют ввод.
Ресурсоемкие проверки делаются по onChange, например, проверка ввода CAPTCHA. См. атрибут data-async.
- Функциональность формы не зависит от внешнего оформления! Вы можете оформлять элементы ввода как угодно.
- Возможность отправить группу checkbox'ов в компактном виде (см. пример ниже).
- Возможность склеить значения нескольких элементов ввода в один параметр (см. функцию addMergeableField).
- Возможность не отправлять на сервер незаполненные поля фильтра. Очень удобно при отправке методом GET. В строке запроса вы видите только заданные параметры.
- Список допустимых для ввода символов. Прочие символы ввести с клаиатуры не получится. Но их можно перетащить мышкой. Поэтому regexp не забывайте прописывать.
- Возможность проверять значение на уникальность AJAX-запросом.
И это не все!
TODO (ближайшие планы)
- Шифрование отдельных полей по открытому ключу. Полезно для форм авторизации. Пароль на сервер полетит в зашифрованном виде.
- grid (таблица как в excel).
- RGB (выбор цвета и прозрачности).
- WYSIWYG-редактор BBCode с проверкой валидности.
Присылайте свои идеи, поставим в план.
Цель проекта ITForms
Создать библиотеку свободно распространяемую с открытым исходным кодом, которая бы
существенно повысила безопасность и удосбтво веб-интерфейсов (HTML-форм) сайтов.
Пример формы
Файл с демонстрационной формой
Дистрибутив
Русский язык. Языковой файл подключать для 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-формы
- <form ... data-dont-send-empty-fields=1> — Если data-dont-send-empty-fields=true в тэге form, то перед отправкой будут удалены все незаполненные поля ввода.
Очень удобно для фильтров поиска, когда информация передается методом GET.
- <input ... data-min-length — минимальное количество символов для текстовых полей. data-min-length=1 означает по сути, что поле обязательно к заполнению.
- <input ... data-regexp — проверка текстового поля на регулярное выражение.
- <input ... data-enable-chars — список допустимых символов, прочие символы с клавиатыры ввести не получится.
- <input ... data-placeholder — устанавливает Placeholder в текстовое поле. Отличается от стандартной реализации HTML5 тем, что если в поле
ввести символы и потом установить пустое значение, то data-placeholder показываться не будет дабы не смущать пользователя.
У вас есть выбор какое поведение выбирать стандартное — placeholder или data-placeholder.
- <input|select ... data-help — создает всплывающую подсказку при установке фокуса на текстовое поле.
- <select ... data-combobox — установить для текущего списка комбобокс.
- <input ... data-min-value — минимальное значение числа и даты;
- <input ... data-max-value — максимальное значение числа и даты;
- <select multiple="multiple" ... data-min-selected — минимальное количество выбранных элементов в select-multiple.
- <select multiple="multiple" ... data-max-selected — максимальное количество выбранных элементов в select-multiple.
- <input type=file ... data-file-type — тип загружаемых файлов. Может быть указано несколько типов через запятую.
- <input|select ... data-user-func - вызов пользовательской функции для дополнительной проверки. Пользовательская функция возвращает сообщение об ошибке
или пустую строку в случае успешной проверки.
Пользовательская функция может проверять валидность поля в зависимости от значений других полей формы.
Также она может динамически в зависимости от значения поля подгружать AJAX'ом новые новые поля формы, данные, изменять другие поля формы.
Пример: data-user-func="funcAlert('1 параметр','2 параметр');"
- <input ... data-datepicker|data-datetimepicker|date-timepicker — устанавливаем для текущего поля один из трех календарей.
- <input ... data-async — Если data-async=true, то значение проверяется после ввода каждого символа. Если data-async=false, то значение поля проверяется после снятия с него фокуса или перед отправкой.
- <input ... data-slider — привязываем ползунок. Детальнее смотрите пример.
- <input ... data-regexp-err-msg — сообщение об ошибке в случае несоответствия регулярному выражению.
- <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
Публичные методы
- setCheckboxProperty(checkboxname, sendAs, minSelected, maxSelected);
// sendAs может быть:
// 'csv' — тогда значения выбранных чекбоксов посылаются в виде checkboxname=v1,v2,v3...vn
// 'sum' — тогда значения выбранных чекбоксов бинарно складываются s=v1|v2|v3...|vn и посылается checkboxname=s
// в остальных случаях и если не задано ничего чекбоксы посылаются на сервер в стандартном виде.
- addMergeableField(fieldname, separator, inputs) //имя поля в которое будут склеены значения других полей, разделитель, список полей для объединения
- addEventListeners($('jQuery selector')) //после динамического добавления элемента ввода в форму надо добавить для него обработчики событий.
- itform.setRadioProperty('radioinput', 1); //устанавливаем required=1, чтобы сделать выбор обязательным.
См. исходный код. Вешаются обработчики событий на каждый элемент формы. Вешается обработчик события на 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
|