а как тогда не грузить часть 1 слайдер display none для родителя по идеи должен помочь не грузить дочерние элементы, но по факту всеравно грузит

@voischev вопрос именно так, как я процитировал был задан:

«Я не понял что делает required, и как собственно делать валидацию? например если я хочу запретить отправлять какую то строку в форме»

@xeniuss да, media query предполагают избыточность кода и работу с ним на клиенте. Если избыточность большая или нужно совершенно разное поведение на платформах — нужно server detection и отдавать разный код. Для этого в компонентах и сделан разный код

ок, понял, спасибо

@vithar никто не препирался. Перечислил действия которые нужно сделать. Что бы понять как работает

@voischev ну вот, опять препираешься ;)

Я тоже вообще то до начала топика поднялся ;) медаль мне

@versus_stack я покурил немного код bem-forms. суть такая:

1. модификаторы _has-validation потребуются и на form и на form-field одновременно. при этом модификатор на форме нужен только для того, чтобы в цикле обойти все вложенные form-field и вызвать на них валидацию.

2. модификатор required, насколько я могу судить по коду, есть только у form-field. Чтобы объявить какое-либо поле обязательным, достаточно просто установить этот модификатор для form-field. Если при отсутствии значения требуется кастомное сообщение об ошибке (по умолчанию будет «Required field»), то его можно передать через js-параметры блока:
{
   block : 'form-field',
   mods : {
       type : 'input',
       'has-validation' : true,
       required : true
   },
   js: 'Алярма! В это поле нужно что-то ввести!'
   content : [
       {
           block : 'label',
           content : 'Input'
       },
       {
           block : 'input',
           name : 'firstName'
       }
   ]
}

3. Про как запретить какую-то строку.
Нужно повесить на form-field модификатор _validate с каким-либо значением. Например, можно воспользоваться одним из существующих (скажем, https://github.com/bem-contrib/bem-forms/blob/master/common.blocks/form-field/_validate/form-field_validate_email.js), а можно написать свой собственный по аналогии.

Судя по тому, что лежит в репо, ожидается, что сама логика валидации будет вынесена в модификатор блока validation и просто допушиваться в набор валидаторов в модификаторе _validate в блоке form-field. В случае с приведенным выше валидатором имейлов, логика хранится в https://github.com/bem-contrib/bem-forms/blob/master/common.blocks/validation/_email/validation_email.vanilla.js

Надеюсь, ответил на вопрос.

Как я выше писал, лучше смотреть в ветку v1.0.0

@voischev тогда давай ее сделаем веткой по умолчанию?

Ok

Она у нас в продакшене в принципе используется. Там должно быть немного по другому все и по проще

код там поменялся, но ридми не обновлены :(

вот по этому и версию еще не выпустили)

вроде единственное отличие от того, что я выше написал — это то, что модификатор _has-validation больше не нужен — его внесли в код самих блоков

👍

@voischev вот Владимир молодец, будь как Владимир!

спасибо огромное!

пытаюсь с event'ами разобраться, создал блок button с модом js: clear_form и еще один button с модом load_something, пытаюсь навешать на них события таким образом:

modules.define( 'button', ['i-bem__dom'], function(provide, BEMDOM) {

   provide(BEMDOM.decl( 'button', {
       onSetMod: {

           'js': {
               'clear_form': function() {

                   // bind click
                   this.bindTo('click', function(e) {
                       e.preventDefault();

                       console.log('жмяк clear_form');
                   });
               },
               'load_something': function() {

                   // bind click
                   this.bindTo('click', function(e) {
                       e.preventDefault();

                       console.log('жмяк load_something');
                   });
               }
           }
       }
   }));
});

но это не работает, в чем ошибка, кто-нибудь может подсказать?

в приведенном коде речь про подписку на **изменение** модификатора:

onSetMod: {
   имяМодификатора: {
       значениеМодификатор: function() {}
   }
}