Pull to refresh

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

Reading time 4 min
Views 23K

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

Линки


Tags:
Hubs:
+30
Comments 31
Comments Comments 31

Articles