Валидация HTML-форм и расширение функциональности

Валидации HTML-форм уделяют очень мало внимания. Например, даже на habrahabr.ru пока я регистрировался и входил на сайт несколько раз мне выдавалось сообщение об ошибке: то код протекции ввел неправильно, то в логине указал email вместо логина. А еще бывает пользователи ошибаются с количеством цифр в номере телефона или реквизитах организации, путают русскую букву «с» с английской, при копировании и вставке в Windows лишнии пробелы добавляются к данным.

Конечно, все это не смертельно. Но было бы крайне удобно, чтобы данные проверялись еще до отправки на сервере. Особенно CAPTCHA, ибо ее часто вводишь с ошибкой.

Для решения данной проблемы были несколько способов: HTML5, jQuery Validate, zForms.ru и еще ряд менее известных библиотек. Но все эти способы имели свои недостатки: HTML5 поддерживается не всеми браузерами и не имеет опции не отправлять незаполненные поля, задать сообщение о несоответствии регулярному выражению, ограничить список допустимых символов для ввода в поле, возможности склеивать поля, посылать значения чекбоксов в формате csv или суммы значений.

В zForms.ru нет исходников, нет возможности указать, что проверка пользовательской функцией ресурсоемкая и ее нужно делать по событию onChange, а не onKeyup. Функциональность задается очень громоздким оформлением, которое мешает оформить форму как нам того хочется. И многие параметры передаются в виде: onclick=«return { oOptions: { sPlaceHolder: 'не более 10 символов', iMaxLength: 10 } }», что является не самым простым образом для веб-мастера.

jQuery Validate требует знаний javascript и jQuery. Хотя понятно, что тут можно запрограммировать HTML-форму как угодно.

Но нам нужен был простой инструмент для веб-мастера, где можно было просто задавать дополнительные атрибуты тегов input, select, а вся функциональнасть подключалсь автоматически. Вот мы и написали библиотеку ITForms.class.js. Библиотека бесплатная и активно развивается. Вот что уже сейчас поддерживается:

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 — сообщение об ошибке в случае несоответствия регулярному выражению.

Публичные методы:
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, чтобы сделать выбор обязательным.

Посмотреть как все это работает в действии и загрузить библиотеку можно на сайте itforms.ru

Будем рады замечаниям и предложениям.

— Важное дополнение!

1. Всем еще раз большое спасибо за замечания, многие я уже реализовал. На очереди введение базовых типов.

2. Большая просьба посмотреть исходный код itforms.class.js Есть там некоторые косяки с именованием переменных и методов, где-то стиль общий нарушен, где-то я не подобрал хорошего имени. По стилю расстановок скобок, табуляций вместо пробелов и т.п. спорить не буду, о вкусах смысла спорить нет, а вот если будут замечания по делу, буду рад. Вполне могут обнаружиться ляпы, баги.

В планах есть добавление языков. Но сначала хочется алгоритм отладить, чтобы код не загромождать.