Yii2: как сделать вкладку начальной загрузки активным, если есть какая-либо ошибка yii2

Question

Я создал CRUD, используя Yii2. Теперь я добавил multi-tab используя bootstrap http://getbootstrap.com/javascript/#tabs-examples

Теперь у меня есть некоторые правила проверки на поле, как required validation. , когда кнопка «Сохранить» нажата, на активной вкладке отображается ошибка, но если на неактивной вкладке есть какая-либо ошибка, она не отправит форму. , если в активной вкладке есть какая-либо ошибка, пользователь исправит их, выполнив правильное действие, но он не поймет, что на других вкладках есть и ошибки.

Так что я хочу, если в другой вкладке есть какая-либо ошибка, тогда эта вкладка станет активной.

, и если пользователь удалит всю ошибку проверки на активной вкладке, попробуйте повторно отправить форму, после чего она снова переместится к следующей ошибке, содержащей вкладку.

вот мой код формы

<?php $form = ActiveForm::begin(); ?> 
    <div class="nav-tabs-horizontal"> 
    <ul class="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist"> 
    <li class="active" role="presentation"><a data-toggle="tab" href="#user" arria-controls="user" role="tab">User Details</a></li> 
    <li role="presentation"><a data-toggle="tab" href="#company" aria-controls="company" role="tab">Company Details</a></li> 
    </ul> 

<div class="tab-content"> 

    <div class="tab-pane active" id="user" role="tabpanel"> 
     <div class="form-group form-material">` 
      <?= $form->field($model, 'first_name')->textInput(['placeholder'=>'First Name']); ?> 
      </div> 
       <div class="form-group form-material"> 
       <?= $form->field($model, 'last_name')->textInput(['placeholder'=>'Last Name']); ?> 
       </div> 
       <div class="form-group form-material"> 
       <?= $form->field($model, 'email')->input('email'); ?> 
       </div> 
       <div class="form-group form-material"> 
       <?= $form->field($model, 'password')->passwordInput(['placeholder'=>'Password']);?> 
       </div> 
        <div class="form-group form-material"> 
       <?= $form->field($model, 'repeatpassword')->passwordInput(['placeholder'=>'Repeat Password']);?> 
       </div> 

     </div> 

     <div class="tab-pane" id="company" role="tabpanel"> 

     <div class="form-group form-material"> 
     <?= $form->field($company, 'Title')->textInput(['maxlength' => true]); ?> 
     </div> 

      <div class="form-group form-material"> 
      <?= $form->field($company, 'Website')->textInput(['maxlength' => true]); ?> 
      </div> 


       <div class="form-group form-material"> 
        <?= $form->field($company, 'Description')->textarea(['rows' => 6]); ?> 
       </div> 

       <div class="form-group form-material"> 
       <?= $form->field($company, 'Status')->dropDownList(['Active' =>'Active','Deactive'=>'Deactive','Pending'=>'Pending'],['prompt'=>'']) ?> 
        </div> 
      </div> 
    </div> 

     <?= Html::submitButton("Save", ["class" => "btn btn-success"]); ?> 
    </div> 
    <?php ActiveForm::end(); ?> 

Answer 1

У вас есть три варианта:

1. Не использовать вкладки

Выражаясь прямо, идея использования вкладок в форме, которая требует проверки, обычно считается плохим выбором с точки зрения удобства использования, beca используйте добавление сложности к уже сложному заданию: validation.
Я не обязательно говорю о сложности логики программирования, которая может быть достаточно высокой в ​​зависимости от вашей формы, но о сложности, которая возникает из-за необходимости иметь дело с (и фокусировать внимание) пользователей, у которых возникают проблемы с форма, в первую очередь, которые, как правило, являются «не так технически подкованны».

Простым решением было бы поместить всю вашу форму в один прокручиваемый контейнер.

2. Validate каждая вкладка отдельно, прежде чем покинуть его

Это, вероятно, лучший способ пойти. Просто подтвердите текущую вкладку для элементов на событии show.bs.tab и preventdefault(), если проверка не удалась, показывая ошибки (в конечном счете), прокрутив вкладку до первой.

Если вы пройдете этот маршрут, вам нужно будет разделить вашу проверку на отдельные функции, по одному для каждой вкладки. Общая проверка формы будет суммой отдельных функций проверки вкладок. Это упростит ваш пользователь, чтобы понять форму и пройти через нее, и, вероятно, увеличит общую удобство использования и успех вашей формы.

Единственный «сложный» частью этого было бы убедиться, что ошибка всегда прокручивается в поле зрения, если содержимое вашей вкладки не вписывается в один экран. Если вы этого не сделаете, возможно, пользователи попытаются изменить вкладку и не поймут, почему она не работает, что делает форму сломанной.

3.Создать «первая ошибка дисплея» функция

Последний вариант - сделать вашу функцию проверки и найти вкладку первой ошибки. Не оптимально, потому что сложнее дать информацию о пользователе о том, сколько ошибок в общей сложности, и как далеко он может фактически отправить форму, но это лучше, чем пытаться подчиниться и не знать, почему она не работает.

В зависимости от фактической разметки вашей формы, это может быть различным, но, в принципе, если селектор для вашей ошибки, содержащей элемент формы является .x, это должно сделать его вкладку активным:
$('.x').closest('[role="tabpanel"]').tab('show');

Так же, как с опцией 2., вам нужно проявлять особую осторожность, чтобы прокрутить ошибку в представлении, если она не отображается по умолчанию, когда вкладка активирована.

Answer 2

Как писал Андрей в своем ответе, лучшим решением является проверка каждой вкладки отдельно, прежде чем покинуть ее. Это лучший способ справиться с этим, как видно на протяжении многих лет.