bem-contrib / bem-forms Goto Github PK

View Code? Open in Web Editor NEW

33.0 18.0 18.0 301 KB

Forms building library on BEM methogology

JavaScript 94.51% Shell 0.55% HTML 4.62% CSS 0.32%

bem-forms's Introduction

BEM Forms Library

License MIT

bem-forms's People

Contributors

Stargazers

Watchers

Forkers

qfox aatarasoff dragn s-panferov appwilio redhedg kompolom adinvadim flyer3d schemelev jerry-ok rtemision realetive belozer mayaoshimay ijakparov galichy79

bem-forms's Issues

Separate inputs format from validate block

can setup validation messages by js params

Compatibility library structure with bem-components

form_validate

Run validates on submit
Has setMessage() and getMesssage() like form__field_validate

Few variants of form: form_simple, form_fields, form_else

form_simple will search for form__controls and provide all of them to validation block or user's code. Also it will provide all of data from them.
form_fielded will search for form__field (complex proxy blocks) with the same interface that will provide already assembled data from from__controls that assigned to __fields.
Any other form types possible with pure interfaces library provided by form's elements.

It will allow us to make flexible form variator that can be extended in future with other helpers, interfaces and form types. Any abandoned ideas will be moved out with new releases. Simple.

label: create block

Block label is for add labels to controls in some standard way.

wrong card validation

Card validation returns wrong_length error for 16 digits.

wrong error messages setup in validation_card

Need: message || DEFAULT_MESSAGE

form-field and form examples with overriding methods about messages in example.blocks

Do we need `form-field` block?

.form-field__message vs .form__field-message or .form__field .form__message or form__field_with-message
form-field_type_input vs form__field_type_input
form-field__control vs form__control

etc.

Check brockens form-fields length before setup focus

https://github.com/bem/bem-forms/blob/dev/common.blocks/form/_has-validate/form_has-validate.browser.js#L49

think about validation event

On project level overriding is very bad. I need info about base events and disable its, then write custom events.

popup not control in message_type_popup

Mix message on popup

prev and new value for message in form and form-field setMessageVal

message: create block

Block message is for show validation errors and other messages.

formfield-like interface to create any controls and __fields

We should refine this interface and move it out to separate element which be used by form.

Some guesses for name:

form__tuple
form__key-value
form__name-value

This one can be a BEM-block with a simple interface:

{*} getVal()
void setVal({*})
{string|Object} getName()

Do we need something else here?

It will be used as a base interface for form__field/__control blocks.

send directions from form-field to message_type_popup

show/hide/toggle message methods

bowerrc: set cache/registry dirs

form__field_validate

Common mod for validate field value

Mod values

Card
Email
Money
Pattern
Numbers
Required

form: add enctype attr

Очень часто форма используется с multipart/form-data

{
            block : 'form',
            tag : 'form',
            attrs : {
                action : '/posts/',
                enctype : 'multipart/form-data',
                method : 'post'
            },
            content : []
}

collect fields in form on validate

If i add new field, form don't know about it and validation don't work

validation: normalize API of validators and specs

All error messages should be objects (?) or strings

Normalize all validators:

set status mods on form-field message

Проблемы при пробрасывании положения popup. Как-то надо этот момент порешать. Положение у popup, стили у message, нужны стили от message на положение popup

Do validation card default message is string: Incorrect card number

https://github.com/bem/bem-forms/blob/dev/common.blocks/validation/_card/validation_card.vanilla.js#L9-L13

form-field messages

form-field tmpls(connect with message block), depend on #1
setMessage() and getMessage()

Form getVal from fields instead of controls

Why do we need 'has-validate' mod on form-field?

Why do we need has-validate mod on form-field? The same thing is denoted by the presence of validate mod...
Moreover, I think it would be better to setup validators not through mods, but with a parameter, and support multiple validators, the example interface could be:

{
    block : 'form-field',
    validators : [
        {
            type : 'required',
            message : 'Введите номер карты' // could contain error message
        },
        'card', // could be just string
        {
            type : 'regex',
            pattern : /^4.*/, // could contain extra parameters
            message : 'Тип карты не поддерживается'
        }
    ]
}

form: bh templates

validate: create block

Validations types is mods. Info about this method

Validation block and API

We using it as a mix for input (or similar) blocks right now:

{
  block : 'input',
  mods : { theme : 'islands' },
  mix : [
    { block : 'form', elem : 'control' },
    { block : 'validation', mods : { numbers : true }, js : {/* validation params */} }
  ]
}

There is a lot of data that we should pass for each field and I really want to simplify it if possible.

Any guesses will help a lot.

The one that placed on the top of my mind probably have troubles with theme deps:

{
  elem : 'control',
  mods : { type : 'text', theme : 'islands', size : 'l', validation : 'numbers' },
  js : { validation : { /* validation params */ } }
}

control_validation_numbers will require validation_numbers block, form__control_type_text will require input and input_type_text, and form__control_theme_islands will require input_theme_islands. Right?
Also it can internally regenerate the rest of needed bemjson by BH/BEMHTML but I'm afraid of missing deps here and need review.

I think that's all validation block needed to return some validation result. All other work with form should be placed in form_validation.