Как провести рефакторинг кода — валидации формы?

Question

[Алексей Скляров]

Есть такой кусок:

$('input[name=how\\[\\]]').on('change', function(e){
            $('#how_success').css('display','block').addClass('fade in');
            $('#how_error').css('display','none').addClass('fade in');
        });
        $('input[name=road\\[\\]]').on('change', function(e){
            $('#road_success').css('display','block').addClass('fade in');
            $('#road_error').css('display','none').addClass('fade in');
        });
        $('input[name=alone\\[\\]]').on('change', function(e){
            $('#alone_success').css('display','block').addClass('fade in');
            $('#alone_error').css('display','none').addClass('fade in');
        });
        $('input[name=qservices\\[\\]]').on('change', function(e){
            $('#qservices_success').css('display','block').addClass('fade in');
            $('#qservices_error').css('display','none').addClass('fade in');
        });
        $('input[name=qsocial\\[\\]]').on('change', function(e){
            $('#qsocial_success').css('display','block').addClass('fade in');
            $('#qsocial_error').css('display','none').addClass('fade in');
        });
        $('input[name=qsales\\[\\]]').on('change', function(e){
            $('#qsales_success').css('display','block').addClass('fade in');
            $('#qsales_error').css('display','none').addClass('fade in');
        });

Валидацию опустил, там код такой же. Собственно, как видно, имеется куча чекбоксов, которые раскиданы по блокам, в каждом блоке скрыто сообщение success, error.

Первое что приходит в голову - хранить в массиве все эти name, и просто циклом проходить по ним, может быть есть какой-то другой вариант?

Answer 1

[Vitaliy]

Здесь одним рефакторингом не обойтись, нужно поменять принцип взаимодействия с инпутами и блоками с ошибками к ним, то есть выводить отдельные id'шники для каждого поля вообще нет необходимости

Например, в одном из компонентов к Bootstrap сделано следующим образом:

Для каждого input'а выделается блок, который содержит сам input и блоки success и error.
Например

<div class="valid-group">
<input name="how"/>
<div class="valid-success"></div>
<div class="valid-error"></div>
</div>

Далее повесть обработчики

$('valid-group input').on('change', function(e){
           var input = $('this');
            var group = input.parent('.valid-group');
           group.find('.valid-success').css('display','block').addClass('fade in');
           group.find('.valid-error').css('display','none').addClass('fade in');

     switch(input.attr("name")) // для каждго поля своя валидация. Хотя стоит разобраься в том, что между ними общего и вынести некоторые вещи как data атрибуты
         {
            case 'how':  
              //...
                break;
             }
  });