form-field.ru.md

form-field

Блок form-field используется для описания поля формы.

{
    block : 'form-field',
    id : 'input',
    mods : {
        type : 'input',
        'has-validation' : true,
        required : true,
        message : 'text'
    },
    content : [
        {
            block : 'label',
            content : 'Input'
        },
        {
            block : 'input',
            name : 'firstName'
        }
    ]
}

Специализированные поля блока

Список зарезервированных полей входного BEMJSON:

Поле	Тип	Описание
id	String	id поля ввода

Модификаторы блока

Типы _type

Блок представлен следующими типами:

• input. текстовое поле - input(form-field_type_input)

{
    block : 'form-field',
    mods : {
        type : 'input'
    },
    content : [
        {
            block : 'input',
            name : 'firstName'
        }
    ]
}

• textarea. текстовая область - textarea(form-field_type_textarea)

{
    block : 'form-field',
    mods : {
        type : 'textarea'
    },
    content : [
        {
            block : 'textarea',
            name : 'text'
        }
    ]
}

• checkbox. «чекбокс», «флажок», «переключатель» checkbox(form-field_type_checkbox)

{
    block : 'form-field',
    mods : {
        type : 'checkbox'
    },
    content : [
        {
            block : 'checkbox',
            text : 'Вариант 1',
            name: 'name1',
            val: '1'
        }
    ]
}

• checkbox-group. группа переключателей - checkbox-group (form-field_type_checkbox-group)

{
    block : 'form-field',
    mods : {
        type : 'checkbox-group'
    },
    content : [
        {
            block : 'checkbox-group',
            options : [
                { val : 1, text : 'first' },
                { val : 2, text : 'second' }
            ]
        }
    ]
}

• radio. «радиопереключатель», «радиокнопка» - radio (form-field_type_radio)

{
    block : 'form-field',
    mods : {
        type : 'radio'
    },
    content : [
        {
            block : 'radio',
            text : 'Radio switch'
        }
    ]
}

• radio-group. группа зависимых переключателей - radio-group (form-field_type_radio-group)

{
    block : 'form-field',
    mods : {
        type : 'radio-group'
    },
    content : [
        {
            block : 'radio-group',
            options : [
                { val : 1, text : 'first' },
                { val : 2, text : 'second' }
            ]
        }
    ]
}

• hidden - поле, не имеющее визуального представления. Используется для привязки дополнительных, скрытых для пользователя, данных к форме. Значение можно менять через JavaScript используя метод setVal.

{
    block : 'form-field',
    mods : {
        type : 'hidden'
    },
    name : 'some-name',
    val : 'some-value'
}

Валидация _has-validation

Подключаюет логику валидаторов. Используется в группе с модификаторами _required и _validate_*.

{
    block : 'form-field',
    mods : {
        type : 'input',
        'has-validation' : true
    },
    content : [
        {
            block : 'input',
            name : 'firstName'
        }
    ]
}

Обязательное поле _required

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

{
    block : 'form-field',
    mods : {
        type : 'input',
        'has-validation' : true,
        required : true
    },
    content : [
        {
            block : 'input',
            name : 'firstName'
        }
    ]
}

Базовые валидации _validate

Абстракция над ванильными методами валидаций блока validation применимо к значению в поле. Значение модификатора должно полностью описывать валидацию возвращаемого значения.

• card. Проверка номера карты

{
    block : 'form-field',
    mods : {
        type : 'input',
        'has-validation' : true,
        validate : 'card'
    },
    content : [
        {
            block : 'input',
            name : 'firstName'
        }
    ]
}

Вывод сообщений _message

Абстракция надо блоком message. Устанавливает логику вывода сообщений валидации.

• text. Текстовое сообщение.

{
    block : 'form-field',
    mods : {
        type : 'input',
        'has-validation' : true,
        required : true,
        message : 'text'
    },
    content : [
        {
            block : 'input',
            name : 'firstName'
        }
    ]
}

• popup. Попап.

{
    block : 'form-field',
    mods : {
        type : 'input',
        'has-validation' : true,
        required : true,
        message : 'popup'
    },
    content : [
        {
            block : 'input',
            name : 'firstName'
        }
    ]
}