tFormer.js — велосипед для валидации форм

    tFormer.js — empower your HTML forms



    Предисловие:


    Вам приходилось верстать формы? Приходилось писать скрипт для валидации этих форм на клиенте? Доводилось ли использовать уже существующие плагины/надстройки для валидации форм?
    Мне приходилось, но я не был на 100% удовлетворен ни от подхода решения задачи в лоб (собственный скрипт валидации для каждого проекта под его формы), ни от того, как работают существующие сторонние плагины.

    Проблема:


    Основными проблемами собственных скриптов и плагинов всегда были — гибкость, удобство и простота.
    Большое количество data-attributes, необходимых для конфигурации скриптов (как это в Parsley.js) делают и код менее читабельным, и никогда не помнишь, как все они пишутся. Не просто…
    Не все плагины хорошо подходили под желаемые HTML-формы, а постоянно писать свои скрипты под разные формы не всегда удобно и разумно.

    Задача:


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

    Решение:


    Решение вылилось в небольшой опенсорсный плагин, который получил название tFormer.js.


    Основные возможности и особенности:


    • Независимость — не нуждается в jQuery (редкость в наше время);
    • Большой список валидационных правил;
    • Все валидационные правила короткие и интуитивные — легко запомнить и использовать;
    • Комбинирование и установка правил всего через один data-attribute или через опции при инициализации нового объекта tFormer;
    • Отдельный объект, который производит саму валидацию значений, может быть использован вне основного плагина или для дополнительных сложных валидаций;
    • «Кастомная» функция валидации own() — может быть написана разработчиком для сложных валидаций конкретного поля;
    • Изменение правил и настроек валидатора «на лету» (методы setRules() и set());
    • Контроль сабмит события и визуальный контроль сабмит кнопки;
    • Кнопки для проверки валидации (check buttons);
    • Изменяемое валидационное событие (по умолчанию событием для валидации есть «input» и «keyup»);
    • Задержки валидации по таймаутам;
    • Cостояния обработки;
    • Возможность выставлять опции как для всех полей так и уникальные для каждого поля;
    • onerror и onvalid функции которые срабатывают после валидации;
    • before функция выполняется каждый раз перед валидацией;
    • Валидация по AJAX без строгого регламента для AJAX ответа (в функции end(result) разработчик должен сам вернуть true или false, обработав ответ);
    • Модификация error, processing и disabled классов;
    • … и прочее.


    Установка и использование:


    1. Скачать;
    2. Подключить скрипт на желаемой странице;
    3. Определить новый объект tFormer с желаемыми опциями.


    Пример HTML формы:
    <form id="my_form_id">
         <input type="text" name="zip" data-rules="a1 l=5" />
         <input type="text" name="email" data-rules="* @" />
         <input type="submit" value="Submit" />
    </form>
    


    Пример минимального определения tFormer:
    var my_form_id = new tFormer('my_form_id');
    


    Пример определения tFormer c указанием модификаций:
    var my_form_id = new tFormer('my_form_id', {
         errorClass: 'my_own_errorClass', // новый класс для полей, которые не проходят валидацию
         timeout: 666, // валидационный таймаут
         disabledClass: 'i_am_disabled',
         onerror: function(){  // обработчик ошибок валидации
              console.log('The field with name `' + this.name + '` is not valid');
         },
         // другие опции ….
    
         fields: { // опции который относятся к конкретным полям
              email: {
                   timeout: 500 // таймаут валидации для поля email
              }
         }
    });
    


    Краткая таблица валидационных правил:


    Правила Описание
    * необходимое поле (значение не может быть пустым)
    @, @s, ip, base64, url имейл, имейлы через запятую, IP аддресс, Base64 строка, URL (соответственно)
    <, >, >=, <= сравнение значений поля с числами. (пример ">=10" — значение поля должно быть больше или равно 10)
    l=, l<, l>, l>=, l<= сравнение количества символов значения поля (пример "l=5" — значение должно состоять из 5 символов)
    =, =# сравнение с конкретным значением ('=10', '=some_value') или со значением какого-то поля с указанным id ('=#some_id')
    !=, ! не равно или не содержит ('!=some_value' — не равно 'some_value', '!.com' — не содержит '.com')
    c, cv, cm, ca, cd валидация кредитных карточек (все типы, visa, mastercard, amex, discover)
    D= сравнение на соответствие формату даты (например "D=Y-M-D" — проверяет на соответствие год-месяц-число)


    Куски кода:


    Пример изменения опций и правил валидации:
    my_form_id.set({timeout: 555}); // новый таймаут для валидации
    my_form_id.setRules(' ', 'email'); // теперь поле всегда валидно - нет правил
    


    Отдельный объект для валидации (используется основным плагином и может быть использован отдельно от него):
    _v_('some value').validateWithRules('* l>5'); // => true
    


    Кастомная функция валидации полей сложного типа (создается девелопером по необходимости)::
    var my_form = tFormer('my_form_id', {
        fields: {
            field_name: {
                own: function(){
                    var my_value = this.value;
                    var is_ip = _v_(my_value).validateWithRules('* ip');
                    var is_email = _v_(my_value).validateWithRules('* @');
                    var is_url = _v_(my_value).validateWithRules('* url');
                    return (is_ip || is_email || is_url);
                }
            }
        }
    });
    


    Методы для контроля состояния формы:
    // активировать / деактивировать сабмит кнопку
    my_form.submitButtonControl( true ); // алиас - submitButtonOn()
    my_form.submitButtonControl( false ); // алиас - submitButtonOff()
    
    // включение / выключение состояния обработки у сабмит кнопки
    my_form.processing( true ); // алиас - processingOn()
    my_form.processing( false ); // алиас - processingOff()
    
    // блокировка и разблокировка сабмит кнопки формы
    my_form.lock();
    my_form.unlock(); // что разблокировать форму надо вызвать unlock() столько раз сколько был вызван lock()
    


    Статус плагина:


    Плагин перешагнул версию 0.3 и сейчас в бете.
    Работает в новых версиях браузеров и даже в IE8 (пришлось заморочиться).
    Лежит на гитхабе, делается по мере возможности и времени, ждет дополнительных идей и коммитов со стороны всех заинтересовавшихся разработчиков :)

    Линки


    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 31
    • +4
      Ниша подобных плагинов уже заполонена. А когда рынок переполнен — единственное возможное решение — быть лучше конкурентов. а первый взгляд все более-менее удобно. Что же, удачи.
      • +2
        В наше время трудно удивить мир чем-то сверх новым, а вот улучшать уже существующие идеи, делать их удобнее и развивать их в лучшую сторону можно бесконечно :)
        tFormer.js именно такая попытка улучшийть существующие решения.
        Спасибо :)
        • +4
          Именно велосипедисты крутят шар земной!
          Зеленая улица велопробегу!
          • +1
            Спасибо большое!
          • +1
            спасибо, нужная вещь!
        • +10
          Ядерная смесь из подчеркиваний и camel case доставляет.
          • +2
            Было бы круто, если бы вместе с валидацией была предусмотрена возможность форматирования поля при вводе пробелами и другими символами, например, под номер пластиковой карты или номер телефона.
            • 0
              Да, добавить можно маски ввода, подсвечивание, подсказки при вводе (в этих подсказках можно так же указать пример валидной записи)
              • 0
                это есть в планах, так-же как и jQuery версия, и многие другие прелести, которые чуть позже опишу в TODO.md / IDEAS.md на гитабе.
                но для запуска бета версии пока функционала хватит :)
              • +4
                Жалко, что от проверки полей на серверной стороне это не избавляет.
                • +1
                  Можно пояснить за минусы?
                • 0
                  // включение / выключени процессинг состояния у сабмит кнопки

                  Простите за занудство, но «включение/выключение состояния обработки у кнопки подтверждения» теперь не торт?
                  • –1
                    думаю что «кнопка подтверждения» менее знакомое словосочитание чем «сабмит кнопка» среди веб разработчиков.
                    касательно «процесинг состояния» солласен, поправлю.
                    Спасибо большое за замечания
                  • –2
                    Что? Таймауты в валидаторе? Вы сделали мой день.
                    • +4
                      Рад стараться, но иногда это необходимая вещь.
                      К примеру в случае с валидацией через AJAX запрос, чтоб не слать запросы по каждому инпуту мы можем ждать пока инпуты прервутся на 2 секунды например и только тогда делать запрос.
                      • –5
                        К примеру? Честно, не могу представить.
                        • +4
                          примеру: по умолчанию таймаут для валидации через запрос равен 2000
                          в случае если пользователь прервет ввод данных на 2 секунды — tFormer пошлет запрос для валидации введенных в поле данных.
                          • 0
                            не сочтите за нападку, но underscore debounce, не?
                            • 0
                              Ни в коем случае не нападка и замечание очень кстати. Смысл моих таймаутов такой-же как и underscore debounce, если пользователь прерывается на время=timeout — выполняется валидация.
                              В случае AJAX валидации, когда пользователь прервался на requestTimeout и запрос еще не успел вернуть результат, а пользователь опять изменил введенные данные — предыдущий запрос прерывается и запускается счетчик для нового.
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • 0
                        да, под ИЕ8 много чего осталось сделать, но скорее всего поддержки ниде 9-го вскоре вообще не будет…
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • 0
                          согласен по всем пунктам.
                          Единственная причина из-за которой пока сделано не та — мало времени на разработку.

                          замечание записал в туду-лист, Большое спасибо!)
                        • 0
                          Можно расширить синтаксис собственным валидатором? Или все эти *, @, @s захардкожены?
                          • 0
                            Oбъект _v_ который используется для валидации пока не расширяемый (это временно).
                            Его можно дописать в случае необходимости ну или все что не валидируется стандартными парвилами плагина можно валидировать через own() функцию.

                            Если у Вас есть идеи как его расширить/дополнить/улучшить — радо рассмотрю детальный фидбек.

                            Так же уже работаю над полной поддержкой HTML5 синтаксиса форм.
                          • 0
                            По описанию впечатляет, но посмотрим как будет жить в реальных проектах.
                            • 0
                              Спасибо!
                              Пока это все на самом деле очень «зеленое» (первая бета), но в планах реализовать многие полезные вещи (включая и поддержку официального HTML5 синтаксиса для валидации форм).
                              Если есть идеи / замечания / детальный фидбек — буду рад услышать
                            • +1
                              Главное чтобы это вдохновение быстро не иссякло! Успехов! Буду следить за развитием!
                              • 0
                                Ну, я думаю не иссякнет:)
                                + после общения с некоторыми докладчиками на FrontTrends 2013 (там я и дал первый старт плагину), определилась его судьба на несколько версий вперед, вопрос лишь времени
                              • +1
                                Немного не понял из статьи и документации, сам сабмит формы по AJAX присутствует?
                                • 0
                                  Нет, сабмита через AJAX нету пока, только валидация элементов формы через запрос.
                                  Пока есть возможность написать свою submit() функцию которая будет использоваться при оригинальном событии «onsubmit».

                                  PS. Это хорошая идея — записал, будет в следующих версиях. Большое спасибо!

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