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 (пришлось заморочиться).
    Лежит на гитхабе, делается по мере возможности и времени, ждет дополнительных идей и коммитов со стороны всех заинтересовавшихся разработчиков :)

    Линки


    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 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 и запрос еще не успел вернуть результат, а пользователь опять изменил введенные данные — предыдущий запрос прерывается и запускается счетчик для нового.
                    • UFO just landed and posted this here
                        0
                        да, под ИЕ8 много чего осталось сделать, но скорее всего поддержки ниде 9-го вскоре вообще не будет…
                      • UFO just landed and posted this here
                          0
                          согласен по всем пунктам.
                          Единственная причина из-за которой пока сделано не та — мало времени на разработку.

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

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

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

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

                                Only users with full accounts can post comments. Log in, please.