Валидация 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 Есть там некоторые косяки с именованием переменных и методов, где-то стиль общий нарушен, где-то я не подобрал хорошего имени. По стилю расстановок скобок, табуляций вместо пробелов и т.п. спорить не буду, о вкусах смысла спорить нет, а вот если будут замечания по делу, буду рад. Вполне могут обнаружиться ляпы, баги.

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

Комментарии 68

    +6
    Как мне кажется хороший вариант это html5 валидация + js для старых браузеров. Ну и плюс вы по-моему статью просто скопировали с itforms.ru
      +1
      Не копировал. Можете сравнение сделать. Писал с нуля. Другое дело, что речь то об одном и том же, поэтому сильно новым мыслям взяться неоткуда.

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

      Основная тема в том, чтобы уйти от самописного JS. Чем меньше самописного кода, тем лучше. Если библиотеку использует много сайтов, то количество ошибок в ней будет стремиться к нулю. Время на тестирование библиотеки, на отработку самых разных ситуаций было затрачено больше месяца. Если вы с нуля напишите, то столкнетесь с самыми разными вопросами: от косяков в оформлении до багов.

      +14
      «jQuery Validate требует знаний javascript и jQuery. »,«нужен был простой инструмент для веб-мастера». Веб-мастер который не знает js и JQuery о_О. Кто такой тогда веб-мастер?
        –2
        Веб-мастер не программист. Вот верстальщик может знать стандарты, классно верстать, знать отличия браузеров, но при попытке что-то закодировать получается говнокод.

        Все типовые операции должны быть в библиотеке, чтобы не изобретать велосипед. Чем больше в проекте используется готовых решений, тем лучше.
          0
          Чем больше в проекте используется готовых решений, тем лучше. Весьма спорное утверждение. Заново изобретенный велосипед может быть легче по размеру и функциональнее своего собрата. Поэтому-то в интернете так много слайдеров, аккордионов, табов и так далее.
            +1
            Может быть. А платить кто будет? Проекты делают всегда в условиях ограниченных ресурсов — время, деньги, кадры.

            А так, конечно, можно и Windows переписать легче и функциональней. :)
              +2
              Зачем утрировать? Если есть время и желание, можно и нужно сделать что-то свое, конкретно под свой проект, а не тащить метры бесполезных функций библиотек.
                0
                Можно и против ветра, но опыт доказывает обратное.

                Если студент или программист делает что-то в свое удовольствие, то ради бога, там свои законы.

                Если же нам все же ехать, а не шашечки, то жизнь диктует свои правила. Проект должен быть сдан в срок. Если сидеть и изобретать велосипед, то проект будет золотым по стоимости, все сроки будут провалены, а багов будет выше среднего.

                0
                Под фразой «может быть» я имел в виду, что велосипед может получиться легче и функциональней, а не то что утверждение спорное.
                  0
                  Разные бывают проекты. Где-то важна простота, а где-то максимум быстродействия.

                  И это касается не только серверов (где наращивание парка машин не только недёшево, но и ограничено) но также это касается и клиентских машин и (JS) в частности. Удобство клиента в теории имеет весьма высокий приоритет (к огромному сожалению на практике мало кто об этом помнит) и загрузка «стопицот» библиотек только ради одной страницы регистрации или какой нибудь простенькой формы это не очень то выглядит «юзерфрендли» (браузеры тоже жрут память) Как и у сервера бывает много клиентов и каждый байт на счету, также и у юзера кроме браузера включено много других приложений (а в браузере чаще всего ещё и много сайтов.)

                  Так вот гибкость и простота в ущерб скорости, нужна в активно развивающихся проектах, и где надо в минимальные сроки наращивать функционал. (Так называемая модель «мягкого ввода» когда выкладывается сырая альфа, а уже по пути дописывается до ума.)

                  Что же касается систем имеющих более или менее чёткие спецификации, и сроки с небольшим запасом, тут удобство программистов можно уже подвинуть и на второй план.
                    0
                    Все правильно. Проекты разные, границы применимости того или иного решения всегда существуют.

                    У меня нацеленность на клепание типовых сайтов и даже нетиповых, но одной организацией.
                    Мне как раз важно, чтобы все сайты производимые нашей компанией использовали одну библиотеку. Чтобы экономить время и трудоемкость, и не разбираться каждый раз в разных решениях или кодах самописных.
                0
                Ну как бы до разумного предела, jquery и так вам дает прекрасные инструменты для работы с DOM, событиями и анимацией, не требу\ от вас никаких знаний js, писать на jq это совсем не тоже самое что пистаь на js.

                Хороший верстальщие всегда знает js на более менее приличном уровне, так как делать верстку совершенно не задумываяс о js можно такого наворотить, даже если стандартам следовать, сама структура может быть крайне неудобной.
                  0
                  Имелось в виду, что верстальщик не напишет программный продукт в виде библиотеки. Отдельный код на частный какой-то случай на jQuery напишет, а библиотеку вряд ли.

                  Может я не много знаю хороших верстальщиков, всего троих. Может мы разное пониманием под программным продуктом. Для меня это хотя бы 600 строк кода. Продуманного, без багов, с понятными названиями методов, переменных, классов, с правильными модификаторами области видимости и т.д. и т.п.

                  Понятно, что в частном случае проще написать 10-20 строк кода. Но если мы имеем дело с проектами по созданию сайтов и клепаем эти сайты на потоке, то тут нужен четкий стандарт. Тут некогда писать каждый раз 10-20 строк кода. А самое главное некогда их читать и вкуривать, когда нужно внести изменения.
              0
              пример на вашем сайте
              Числа от 0.53 до 99.13: в русской раскладке клавиатуры или любой другой отличной от английской, не повзоляет ввести точку "."
                0
                Вы уверены, что жмете на точку в русской раскладке, а не на букву «ю»?

                  0
                  хм, да, похоже засиделся пора домой топать
                    0
                    Думаю вам следовало бы отслеживать нажатие на «ю» при вводе в числовые поля и заменять на точку.
                    Это же так не сложно — быть чуть умнее и дружелюбнее.
                      0
                      Пока в ITForms нет такого понятия как числовое поле. И, следовательно, в общем случае это неверно, т.е. могут быть случаи, где точка и быквы «ю» разрешены для ввода. В этом случае будет бага.

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

                      Какие-то бесспорные базовые типы будут введены. Тогда сделаю и букву «ю» для чисел.
                        0
                        Пока в ITForms нет такого понятия как числовое поле.
                        А в HTML5 есть.
                        Я понял, что «числового поля» нету как понятия, но это, должен отметить, большой недостаток.
                        Делайте базовые типы быстрее, тем более, это совсем не сложно.
                          0
                          Постараюсь уже сегодня сделать. Сейчас уже голова не варит, спать надо идти.
                            –1
                            Сделал.

                            Атрибут 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 так:
                            t['number'] = {regexp:"/^[0-9]*?\.?[0-9]+$/", errmsg:"Значение должно соответствовать формату числа с плавующей точкой.", enablechars: "/^[0-9+\-\.]$/"};
                            t['login'] = {regexp:"/^[a-z@\.-0-9]+$/i", errmsg:"Логин должен состоять из латинских букв, цифр, дефиса, точки, собачки. Другие символы использовать нельзя.", enablechars: "/^[a-zA-Z0-9\-_\.@]$/"};
                            t['password'] = {regexp:"/^\S+$/", errmsg:"Пароль не должен содержать пробелов и табуляций", enablechars: "/^\S$/"};
                            t['phone'] = {regexp:"/^[+()0-9 ,\-добext\.]+$/iu", errmsg:"Телефон нужно указывать в формате +7 (495) 988-3040.", enablechars: "/^[+()0-9 ,\-добext\.]$/iu"};
                            t['date'] = {regexp:"/^[12][7-90-3]\d\d-(?:0\d|1[0-2])-(?:[0-2]\d|3[01])$/", errmsg:"Дата должна быть в формате гггг-мм-дд", enablechars: "/^[0-9\-]$/"};
                            t['datetime'] = {regexp:"/^[12][7-90-3]\d\d-(?:0\d|1[0-2])-(?:[0-2]\d|3[01]) (?:[01]\d|2[0-3]):[0-5][0-9]:[0-5][0-9]$/", errmsg:"Дата должна быть в формате гггг-мм-дд чч:мм:сс", enablechars: "/^[ 0-9\-:]$/"};
                            t['time'] = {regexp:"/^(?:[01]\d|2[0-3]):[0-5][0-9]:[0-5][0-9]$/", errmsg:"Время должно быть в формате чч:мм:сс", enablechars: "/^[0-9:]$/"};
                            t['integer'] = {regexp:"/^-?\d+$/", errmsg:"Целое число может состоять из знака минус и цифр.", enablechars: "/^[0-9\-]$/"};
                            t['unsigned'] = {regexp:"/^\d+$/", errmsg:"Целое неотрицательное число может состоять только из цифр.", enablechars: "/^[0-9]$/"};
                            t['bankaccount'] = {regexp:"/^\d{20}$/", errmsg:"Двадцать цифр должно быть без каких-либо разделителей.", enablechars: "/^[0-9]$/"};
                            t['negative'] = {regexp:"/^-\d+$/", errmsg:"Целое отрицательное число должно состоять из знака минус и цифр.", enablechars: "/^[0-9\-]$/"};
                            t['ip'] = {regexp:"/^[0-9%\.]+$/", errmsg:"IP должен иметь формат 192.168.1.%", enablechars: "/^[0-9%\.]$/"};
                            t['inn'] = {regexp:"/^\d{10}(\d\d){0,1}$/", errmsg:"ИНН организации должно состоять из 10 цифр, индивидуального предпринимателя -- из 12 цифр.", enablechars: "/^\d$/"};
                            t['kpp'] = {regexp:"/^\d{9}$/", errmsg:"КПП должно быть из 9 цифр.", enablechars: "/^\d$/"};
                            t['ogrn'] = {regexp:"/^\d{13}(\d\d){0,1}$/", errmsg:"ОГРН - 13 цифр должен сожержать, ОГРН ИП -- 15.", enablechars: "/^\d$/"};
                            t['bik'] = {regexp:"/^\d{9}$/", errmsg:"БИК должен содержать 9 цифр.", enablechars: "/^\d$/"};
                          0
                          Это введёт пользователя в заблуждение относительно того, какой у него регистр включен.
                          0
                          а почему бы по умолчанию не заменять юб, на точку? И, кстати, в русском языке дроби пишутся через запятую как раз.
                            0
                            черт. обновляй комментарии перед тем, как написать!
                              0
                              В русском пишутся, а вот в программах, базах данных используется точка.
                              Считаю это уже не имеющим никакого смысла. Скорее надо изменять правила русского языка для избежания путаницы.

                              Значения атрибутов могут читать и использовать не только методы ITForms, но и вполне сторонние разработчики.
                              И подавляющее большинство при написании кода на JS использует. а не, для чисел.
                                0
                                Скорее, надо не лениться и делать предпроверку перед записью в базу данных. Может, нам так и писать: RUB 3,500,000.34? Это же ужасно.

                                Программисты не должны ничего менять — не их это дело. Но большинство программистов также всячески стараются не написать лишние строчки кода, облегчающие жизнь простых юзеров :).
                          +3
                          Отделите мух от котлет. Валидация — это только проверка содержимого формы, слайдеры и выбор даты/времени — виджеты, склеивание и суммирование значений полей — обработка формы перед отправкой, плейсхолдеры — нечто совершенно отдельное. А вас там в недостатках написано, что плагины только валидируют, но именно в этом и состоит их преимущество — можно подключить только то, что нужно.

                          Всё равно без jQuery ваше творение не работает, ну так и сделайте три разных плагина (виджеты можно опустить). А ещё лучше задействовать для валидации плагин Validation, правила для которого можно задавать в виде html-класса. ИМХО, проблема сложности использования этого плагина надумана — синтаксис правил довольно прост.
                            0
                            С точки зрения веб-разработки форма — это единое целое. Поэтому хочется задавать в атрибутах требуемое поведение.
                            Заранее ведь неизвестно, какая форма будет сгенерирована. У нас формы генерируются автоматически на основе структуры таблиц и данных БД.

                            PHP-класс для генерации форм опубликуем скоро. Он тоже будет бесплатным.

                            Плагин Validation нельзя задействовать хотя бы потому, что там по-моему нет возможности указать по какому событию будет работать валидация. Ресурсоемкая валидация на onKeyUP все повесит. Так же нужна возможность управлять процессом именно изнутри. Ну и чейчас оно написано, работает, уже смысла нет переписывать без серьезных на то оснований.
                            0
                            Первый пример (Числа от 0.53 до 99.13), вводим '100', видим сообщение 'Значение «100» должно быть не больше 99.13'. Выделяем содержимое поля, вводим '0' сообщение все-еще говорит 'Значение «100» должно быть не больше 99.13'.

                            Комбобокс как-то странно работает с клавиатуры, после выбора значения, невозможно выбрать другое. Т.е. потом уже понятно что там фильтрация стоит, но по началу это несколько обескураживает.
                              0
                              Багу с числом поправил, теперь сообщение об ошибке обновляется. Спасибо!

                              Комбобокс стандартный из jQuery UI. На то он и комбобокс, что в нем фильтр.
                              0
                              Всё бы хорошо, если бы не зависимость от jQueryUI. Хотя бы только голый jQuery. И не ясно, какая лицензия на код. Даже в сорцах не указано.
                                0
                                Зависимость от jQuery UI убрал. Можете не подключать jQuery UI, если не используете data-combobox, data-datepicker|data-datetimepicker|date-timepicker, data-slider.

                                Лицензия свободного ПО. В базовой части там все будет бесплатно.

                                Платным у меня была мысль сделать шифрование данных. Но я пока не уверен. Может все будет бесплатно. Постараюсь завтра этот вопрос обдумать и указать лицензию.
                                  0
                                  Дело в том, что это не праздный вопрос, а вопрос возможности включения данной библиотеки, например, в GPL продукт. А GPL совместим не со всеми свободными лицензиями.
                                    0
                                    Ну у меня опыта по лицензиям не было. Я не в теме.

                                    Мне надо почитать, что к чему, посоветоваться с людьми, тогда я смогу что-то сказать.
                                +9
                                «Значение «11111111111111111111111111111111111111111111» должно удовлетворять условиям регулярного выражения /^\d{10}(\d\d){0,1}$/» — очень френдлиюзерс сообщение об ошибке. :)
                                  –3
                                  Есть идеи как это реализовать в дружелюбном для пользователя виде?

                                    0
                                    Конечно, первое что приходит в голову — сделать опциональный параметр «tooltip» для таких полей, который будет содержать текст, появляющийся при этой ошибке.

                                    В который веб-мастер впишет "… должно удовлетворять тому-то и тому-то "
                                      0
                                      Идея хорошая. Чего-то я стормозил, вернее зря отмел ее, т.к. при проектировании мне показалось, что придется делать такие сообщения на каждый параметр. А на самом деле на каждый и не надо. Для прочих параметров типа data-min-value сообщение стандартное.

                                      Спасибо. Сейчас реализую. Глаза замылены, все не сообразишь, хотя решение может на поверхности лежать.
                                        0
                                        Сделал! Действительно стало намного лучше.
                                          0
                                          Ну, если такая скорость реакции разработчиков сохранится, то плагин имеет шансы стать действительно хорошим и нужным инструментом.

                                          P.S. Как-то достало уже узнавать о возможности комментирования раз в 5 минут уже после того как потрудился над написанием мегакомментария.
                                          Хабрабоги, в чем проблема дать юзеру понять это перед тем как браться за перо?
                                    0
                                    Мне кажется пользователя не надо пугать какими-то страшными, непонятными и злобными регулярными выражениями закорючками в ошибках.
                                    Поле 'Русский текст' отказывается считать букву ё русской.
                                    В логине запрещены цифры, подчерк и дефис.
                                    Что не так с мои 99.13 я вообще понять не могу (по моему для чисел кстати лучше всего родной type='number', не умеет его только фф).
                                      0
                                      ё добавил в data-regexp & data-enable-chars

                                      Насчет логина все зависит от системы. Хотите запретить поправьте data-regexp & data-enable-chars.
                                      Подчеркивание разумно запретить, а вот ничего против дефиса и цифр я не имею. Я знал людей с логином int16 и что?

                                      99.13 не до 99.13. До — означает меньше, но никак не равно. Меньше или равно — не больше.
                                        0
                                        До — означает меньше, но никак не равно.
                                        А, это надо было указать, в моём понимании (ну, в человеческой речи по крайней мере) 'от А до Б' означает включительно, в вашем видимо нет. У юзеров тоже могут быть разные трактования. К тому же 0.53 проходит валидацию, что может совсем запутать.
                                        Ещё кстати в поля для числа нельзя ввести e для экспоненциальной записи, хотя например 1e1 вполне подходит под установленные критерии.

                                        Я знал людей с логином int16 и что?
                                        А что? Я тоже ничего против цифр/дефиса не имею, просто пример ваш формы на сайте их запрещал, я говорил только об этом. Впрочем я понял, это настраивается разработчиком.

                                        А что касается фф, в нём <input type='number'/> грациозно деградирует до обычного текстового поля, к нему можно применить ваши правила как они применяются сейчас, одно другому не мешает, просто у пользователей других браузеров в этом поле будут удобные (особенно в опере) кнопочки для инкремента/декремента значения. Не заданное значение инпута можно трактовать как NULL, 0 тоже часто можно.
                                        0
                                        Кстати, насчет number, FF очень популярный браузер. И игнорировать его никак нельзя.

                                        А числа бывают самые разные. Одного number явно не хватит. И чаще всего мы имеем дело с id, который может и NULL быть.
                                        Так что гибкость нужна и возможность доопределить формат ввода.
                                        0
                                        вся эта client-side обвеска совершенно бессмысленна без тесной интеграции с server-side валидацией и собственно генерацией форм, в т.ч. заполненных
                                          –4
                                          Серверная часть скоро будет опубликована на сайте itcms.ru
                                          Сейчас там старая версия еще 2005 года валяется.
                                          0
                                          zforms

                                          Функциональность задается очень громоздким оформлением, которое мешает оформить форму как нам того хочется.


                                          Вот тут вообще не соглашусь, никакой громоздкости там нет. А оформить форму как хочется — да как душе угодно.
                                            0
                                            Да? То-то у нас были коды трехэтажные.

                                            Попробуйте там выстроить ровно в сетку произвольные элементы с произвольными данными. Там жесткая структура dd dt dl очень все портила.

                                            Там с комбооксом баг даже когда он при раскрытии налетает на нижний элемент.

                                            КАПТЧУ там нереально проверять, т.к. все проверки идут по onKeyup. AJAX тормозит, в результате буквы не вводятся.

                                            Мы год пользовались zForms пока не пришли к мнению, что от него необходимо отказаться из-за ряда нерешаемых проблем.
                                              0
                                              Выстраивается все. Только я стили все с нуля прописываю. И к тому же именно в оформлении , и не использую, только как обертывающие теги. И все нормально выстраивается. Ну да, коды трехэтажные. В чем помеха — не вижу. Верстать вполне удобно.

                                              Что ж это за компьютер такой, на котором zForms тормозит? У меня он на нэтбуке далеко не самом проивзодительном даже не пытается подтормаживать.
                                                0
                                                Не zForms тормозит, а сама проверка AJAX'ом. Человек пишет со скорость 10 символов в секунду скажем, а проверка КАПТЧИ требует 0.5 секунды, например. Вот и получается, что нельзя КАПТЧУ проверять по onKeyup

                                                А по-другому zForms не умеет.
                                            +2
                                            Для чего было использовать data-* когда фактически все вышеперечисленное есть в html5 (те же regexp, min/max range… даже step есть :)), неужели сложно было навешать на стандартные атрибуты? Мне например неприятно было бы дублировать />. Любое дублирование это потенциальное место для ошибки.
                                              0
                                              И что будет, если параметр будет обрабатываться и браузером и библиотекой ITForms?

                                              Именно, чтобы не накладывалось одно на другое. Тем более, что поведение и оформление некоторых параметров отличается от того, что задано в браузере.

                                              И сами знаете, как это бывает в браузерах, один так поддерживает, другой сяк. Вот чтобы в эти войны браузеров не ввязываться.
                                                0
                                                Советую почитать спеку по валидации. Там много чего интересного)) Например перехват обработчика браузера при валидации (validity) или игнорирование ее как таковой.
                                                  –1
                                                  Зачем? Чтобы утонуть в версиях браузеров и их совместимостями со стандартами?

                                                  Проблемы не понимаю. Тут дело выбора уже и кому что больше нравится. Кто-то выберет HTML5, кто-то jQuery Validate или еще что-то, а кто-то выберет возможно ITForms, например, потому что проект живой, можно обсуждать и попросить что-то улучшить на русском языке, что немаловажно.

                                                    +2
                                                    Наоборот, для большей совместимости: если отключен js; если форма уже оформлена в соответствии со стандартами и хочется просто подключить вашу библиотеку или использовать вашу/другую, вместо другой/вашей.

                                                    «Проблемы», конечно, нет. Просто не следуя стандартам, вы делаете любительский продукт.
                                                      0
                                                      Желание законное, но сделать такую работу мне не под силу.

                                                      Браузеров вагон и маленькая тележка с учетом их версий, постоянно новые выходят. Постоянно в них что-то новое.

                                                      Автоматически понять что и как именно поддерживает браузер не очень понятно как. Один и тот же параметр два браузера могут реализовывать несколько по-разному.

                                                      Так что по-моему это очень трудоемкая работа. И если посмотреть на все инструменты валидации HTML-форм, то такого ни у кого нет.
                                                        0
                                                        Кажется, начинаю понимать, о чём вы.
                                                        Т.е. если вместо таких атрибутов, как data-regexp, data-min-value, data-max-value и т.д. использовать атрибуты pattern, min, max (из спецификаций) и т.д. — то начинается головная боль с тем, как обрабатывают эти атрибуты браузеры, поддерживающие html5?

                                                        Т.е. нет простого метода перехвата или отключения валидации браузером, а когда вы начинаете просто вклиниваться в этот процесс, получается двойная валидация?
                                                          0
                                                          Да, именно так. И не только.

                                                          Тут еще и проблема в том, что нам нужно все эти процессы контролировать изнутри процесса. Когда у нас есть исходный код itforms.class.js, то мы легко может его дополнить в любом месте и сделать то, что нам нужно. А когда часть кода или алгоритма закрыты, то у нас сужаются возможности для маневра.
                                                  –1
                                                  Я в проекте использовал modrnizr+polyfills. Всё, обошёлся одной вёрсткой в html5, для браузеров не поддерживающих html5forms подгружались нужные библиотеки.
                                                0
                                                zForms — устаревший фреймворк, ему на смену пришёл JZ (в целом то же самое, только оптимизированное и открытое): github.com/dfilatov/jz
                                                  0
                                                  Беглый анализ показывает, что синтаксис там zForms, т.е. по факту нам навязывают лишнии теги dt dl

                                                  Как я уже писал выше, построение в сетку таблицы элементов задача там не тривиальная. Если надо ширину задавать в процентах и форма должна масштабироваться вместе с окном браузера.

                                                  Отдельные элементы dl просто разлетаются, как показал опыт. А обертывание в таблицу получается громоздким.

                                                  — нечитабельно и непонятно

                                                  /> — это ужас. Нечитаемо.

                                                  Дальше круче, но смысла не вижу.

                                                  Хотя опять, есть люди наверно, которым такой синаксис больше по душе. В свое время в 90х были люди отрицающие ООП, были даже те, кто язык Си отрицал, мотивируя, что все на АСМе надо писать или в машинных кодах.
                                                    0
                                                    onclick=«return {jz:{heedChanges:false,preventSubmit:false}}»

                                                    input value="" class=«jz jz-number» id=«input-number» name=«number» onclick=«return {jz:{placeholder:'number',focusOnInit:true,allowNegative:true,allowFloat:true,required:{fn:function(widget) { return widget.getValue() > 10 }}}}»

                                                    Код не вставился. Это то что не читаемо.
                                                      0
                                                      для кода есть кнопочка
                                                  0
                                                  Я бы доточил вариант с ИНН. Когда только начинаешь вводить цифры, получаешь ошибку «Должно быть число 10 или 12 цифр». Как вариант, я бы сделал что-то типа такого алгоритма:
                                                  1. Выводим ошибку если мы ввели больше 12 цифр
                                                  2. Выводим ошибку если мы ввели меньше 10 цифр только если фокус с этого текстфилда ушел, т.е. мы перешли к другому полю.

                                                  При этом, когда мы только начинаем печатать — можно цифры просто отображать красным цветом, пока их не станут 10 или 12 (тогда соответственно зеленым).

                                                  Но это так, мысли в слух, и тут еще еще подумать и хорошо взвесить все за и против.
                                                    0
                                                    Желание хорошее, но сходу решения не вижу простого.

                                                    Дело в том, что есть общий алгоритм работы. И как его изменить в этом конкретном случае непонятно. И библиотеку ITForms на все частные случаи тоже не дело расширять, т.к. у ней уже 20Кб кода.

                                                    Единственный вариант прямой с точки зрения кода и всей архитектуры, это не задавать параметр data-regexp для поля ИНН.
                                                    А определить свою функцию data-user-func и вот в ней уже написать свою проверку по указанному выше алгоритму.
                                                    0
                                                    Важное дополнение!

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

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

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

                                                      0
                                                      есть опечатки в названиях и на сайте тоже
                                                      ITFroms -> ITForms
                                                        0
                                                        Только что поправил на сайте itforms.ru что-то меня прям проглючило. Быстро пишу. Спасибо!

                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                      Самое читаемое