Yii2：如果有任何 yii2 錯誤，如何使引導程序選項卡處於活動狀態

Question

我已經使用Yii2創建了一個CRUD 。 現在我使用bootstrap添加了multi-tab 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. 不要使用標簽

坦率地說，在需要驗證的表單中使用選項卡的想法在可用性方面通常被認為是一個糟糕的選擇，因為您正在為已經很復雜的工作增加復雜性： validation 。
我不一定在談論編程邏輯的復雜性，它可能會變得足夠高，具體取決於您的表單，而是關於必須處理（並集中注意力）對表單有問題的用戶的復雜性首先，他們通常是“不太懂技術”的人。

一個簡單的解決方法是將所有表單放入一個可滾動容器中。

2. 在離開之前分別驗證每個選項卡

這可能是最好的方法。 只需驗證show.bs.tab事件中元素的當前選項卡，如果驗證失敗，則preventdefault()顯示錯誤，（最終）將選項卡滾動到第一個選項卡。

如果你走這條路，你需要將你的驗證分成單獨的功能，每個選項卡一個。 表單的整體驗證將是各個選項卡驗證功能的總和。 這將使您的用戶更容易理解表單並瀏覽它，並且可能會提高表單的整體可用性和成功率。

唯一“棘手”的部分是確保錯誤始終滾動到視圖中，以防您的選項卡內容不適合一個屏幕。 如果您不這樣做，用戶可能會嘗試更改選項卡但不明白為什么它不起作用，從而使表單看起來已損壞。

3.創建“顯示第一個錯誤”功能

最后一個選項是讓您的驗證功能找到並激活第一個錯誤的選項卡。 不是最優的，因為很難向用戶提供關於總共有多少錯誤以及他離實際提交表單還有多遠的信息，但這比嘗試提交而不知道為什么它不起作用要好。

根據表單的實際標記，這可能會有所不同，但原則上，如果包含表單元素的錯誤的選擇器是.x ，這應該使其選項卡處於活動狀態：
$('.x').closest('[role="tabpanel"]').tab('show');

就像選項2. 一樣，如果在激活選項卡時默認情況下不可見，您需要格外小心地將錯誤滾動到視圖中。

Answer 2

正如安德烈在他的回答中所寫，最好的解決方案是在離開之前分別驗證每個選項卡。 多年來，這是處理它的最佳方式。

Answer 3

您應該像這樣為您的視圖注冊 JS 文件

$this->registerJsFile('js/report/index.js', ['depends' => [\yii\web\JqueryAsset::className()]]);

並在此文件中添加 afterValidate() 處理程序（用您的表單 ID 替換 #report-index）：

$('#report-index').on('afterValidate', function(event, messages, errorAttributes){
  if(errorAttributes.length > 0) {
    var errElement = $('#' + errorAttributes[0].id);
    var pane = errElement.closest('[class="tab-pane"]');
    var tabId = pane[0].id;
    $('.nav-tabs a[href="#' + tabId + '"]').tab('show');
    return false;
  }
});