v-form

Агрегация и валидация полей формы

Usage no npm install needed!

<script type="module">
  import vForm from 'https://cdn.skypack.dev/v-form';
</script>

README

Form.js

Агрегация и валидация полей формы

NPM

npm install v-form

Пример test form

Пример login form

Пример registration form

Пример простой формы

Coffee-script

new Form

    formName: 'login'
    formEl: $('.form')
    submitEl: $('.form').find('.submit a')
    fields:
        'email':
            rules:
                email: true
    fieldsOptions:
        rules:
            required: true
    
    onSuccess: (data) ->
        
        self = @
    
        self.submit(false)
        self.preloader(true)

        api({ method: 'POST', url:"login", data: data})
            .error (res) -> console.error res
            .success (res) ->
                self.submit(true)
                self.preloader(false)
Jade

.form

    .field
        .label Email
        input(type='text' name='email')
        .error.error-email

    .field
        .label Пароль
        input(type='password' name='password')
        .error.error-password


    .field
        .submit
            a(href="#"): span Отправить
        .preloader
            div
            div
            div

Установки формы (пример)


fields = 

    'id': false # Если не надо чтобы поле участвовало в форме!

    'email':
        escape: false 
        rules:
            required: true
            email: true

    ###
        Если это выпадющий список, можно указать дефолтное значение для подсветки
        и правило валидации not - для значения по умолчанию
    ###

    'dropdown'
        placeholder: 'Выбрать'
        rules:
            required:
                not: 'Выбрать'

fieldsOptions - общие настройки для всех полей. (Опционально)

Настройки самого поля приоритетней! Ниже приведены настройки по умолчанию


fieldsOptions:
    
    active: true # Активное поле
    style: true # Cтилизовать поле
    autoErrors: true # Автоматически показывать ошибку валидации конкретного поля, если 'all' - то все ошибки поля
    escape: true # Очищать инпут от тегов в отправке
    clearErrorsOnClick: true # Удалять ошибки по клику на поле
    validateOnKeyup: false # Валидировать на keyup
    errorGroup: false # Имя группы полей errors
    fieldGroup: false # Имя группы полей data
    attrs: {} # Атрибуты поля. Например maxlength: 10
    rules: {} # Правила поля

Настройки формы

Ниже приведены настройки по умолчанию

Form
    
    # Обязательные атрибуты

    formEl: false # Элемент формы или класс
    
    
    # Опционально

    logs: true # Логи
    formName: 'form' Имя формы (опционально)

    submitEl: false # Элемент кнопки отправки или класс

    autoInit: true # Автоматическая инициализация формы

    ###
    autoFields
    Автоматическая сборка полей для отправки. Элементы с атрибутом [name]
    Если false - обрабатываться будут только указанные поля!
    ###
    
    autoFields: true
    
    fields: {} # Проверяемые поля
    fieldsOptions: {} # Настройки полей

    enter: true  # Отправка на Enter (В фокусе формы)
    noSubmitEmpty: false # Не отправлять пустые значение и false
    disableSubmit: false # Заблокировать сабмит

    classes:
        input:
            placeholder: "placeholder" # Класс плейсхолдера
        checkbox: 'checkbox'
        radio: 'radio'			
        select:
            select: 'select'
            selected: 'selected'
            options: 'options'
            option: 'option'
            open: 'open' # Класс открытого селекта
            placeholder: 'default' # Класс селекта значения по умолчанию, например 'Выбрать'		
        submit:
            disable: 'disabled' # Класс заблокированного сабмита
        errorField: "error-field" # Класс ошибки поля
        error: "error" # Класс элемента вывода ошибки поля
        preloader: "preloader" # Класс прелоадера формы
        validation: "valid" # Класс успешного поля
    
    templates:
        hidden: """<div style='position:absolute;width:0;height:0;overflow:hidden;'></div>"""
        checkbox: """<div></div>"""
        radio: """<div></div>"""
        select:
            select: """<div></div>"""
            selected: """<div><span>{selected}</span></div>"""
            options: """<div></div>"""
            option: """<div><span>{text}</span></div>"""
        error: """<div>{error}</div>"""

Валидация

Примерь настройки обработки полей У каждого правила (rules) может быть указана причина (reason). По умолчанию reason устанавливается form.js

fields = 

    'login':
        placeholder: "login"
        rules:
            required:
                reason: 'Своя причина'
            alpha:
                reason: 'Своя причина'
            max:
                count: 4
                reason: 'Максимум {count}'
            min:
                count: 2
                reason: 'Минимум {count}'

Правила валидации

Rule Value Пояснение
required true Обязательное поле
required.not значение или массив Обязательное поле + значение кроме
numeric true Разрешены только цифры
alpha true Разрешены только буквы
eng true Разрешены только английские буквы
rus true Разрешены только русские буквы
max число Максимум символов
max.count число Кол-во символов (если указыается причина)
min число Минимум символов
min.count число Кол-во символов (если указыается причина)
email true Email
url true Url
compare объект Сравнение
compare.field строка Имя поля для сравнения
compare.val значение или функция
not значение или массив Исключение
only объект Условия. Разрешены любые из указанных условий (см. patterns)
sctict объект Условие. Обязательны все указанные условия! (см. patterns)

Пример Only и Strict

fields: 
    'name-1':
        rules:
            required: true
            only:
                exp:
                    range: [4,10]
                    alpha: [1]
                    numeric: [0,1]
    
    
    'name-2':
        rules:
            strict:
                exp:
                    range: [10,20]
                    numeric: [1]
                    engLowercase: [1]
                    engUppercase: [1]

Patterns (only,sctict)

Каждому значению можно выставить или true или массив. Например: [0,2] ,где первое значение Минимум символов данного типа, а второе, если передано, Максимум

Key Пояснение
numeric цифры
alpha буквы
rus русские буквы
rusLowercase русские маленькой буквы
rusUppercase русские большие буквы
eng английские буквы
engLowercase английские маленькие буквы
engUppercase английские большие буквы
dot точки
hyphen дефисы
dash подчеркивания
space пробелы
slash слэшы
comma запятые
special специальныe символы
------------ -------------
range: [min,max] Кол-во символов. Например, от 1 до 5

Добавление правила валидации к полю

form.addFieldRule(name,ruleName,rule={})

Добавление Нового правила валидации

rule = 
    condition: (val) -> return true //Условие
    reason: 'Причина' 

form.newRule(name,rule)

События формы

Инициализация формы

form.onInit ->

Нажатие кнопки Отправить (data - данные для работы. list - данные исходные - не экранированные)

form.onSubmit (data, list) ->

Валидация пройдена (data - данные для работы. list - данные исходные - не экранированные)

form.onSuccess (data, list) -> # Отправка данных на серверх

Валидация НЕ пройдена

form.onFail (errors) ->

Сброс формы

form.onReset: ->

Методы формы

Отправка формы

form.Submit()

Сброс формы

form.reset()

Методы полей формы

Добавление поля

form.addField('название поля', options={},onInit: -> )

Удаление поля

form.removeField('название поля')

Сброс поля

form.fields['название поля'].reset()

Сделать поле обязательным

form.fields['название поля'].require(opt={})

Сделать поле активным и наоборот

form.fields['название поля'].activate(flag=true)

Вывести ошибку или удалить На вход строка или массив или false (если удалить ошибку)

form.fields['название поля'].error(errors=false)

Установка значения поля

form.fields['название поля'].val('значение')

Получение значения поля

form.fields['название поля'].val()

Стилизация поля (Применяется, в основном, к select)

form.fields['название поля'].stylize()

Проверить валидность поля


form.fields['название поля'].validate(ruleName,opt={})

Триггеры полей

Следить за ошибками поля

form.fields['название поля'].on 'Error', (e,data) ->

Или

form.on 'Error', '[data-field][data-name="название поля"]', (e,data) ->

Следить за успехом поля

form.fields['название поля'].on 'Success', (e,data) ->

Или

form.on 'Success', '[data-field][data-name="название поля"]', (e,data) ->

Следить за сбросом поля

form.fields['название поля'].on 'Reset', (e,data) ->

Или

form.on 'Reset', '[data-field][data-name="название поля"]', (e,data) ->

Следить за изменениями значения поля

form.fields['название поля'].on 'Change', (e,data) ->

Или

form.on 'Change', '[data-field][data-name="название поля"]', (e,data) ->

Следить за стилизацией поля (Например для навешивания скролла)

form.fields['название поля'].on 'Style', (e,sel) ->

(Пример слежения за всеми полями одного типа)
form.on 'Style', '[data-field][data-type="тип поля"]', (e,data) -> # data.sel - стилизованный селектор dom

Следить за кликом по полю

form.on 'Click', '[data-name="название поля"]', ->

Или

form.on 'Click', '[data-field][data-name="название поля"]', (e,data) ->

Следить за нажатием на поле

form.on 'Keyup', '[data-name="название поля"]', ->

Или

form.on 'Keyup', '[data-field][data-name="название поля"]', (e,data) ->

Дополнения

formValidator.submit(true) # Активировать кнопку отправки
formValidator.submit(false) # Заблокировать кнопку отправки 

formValidator.preloader(true) # Показать прелоадер формы
formValidator.preloader(false) # Скрыть прелоадер формы