ユーザーが最初のタブのデータを入力する前に2番目のタブをクリックするとエラーメッセージを表示する方法

Question

ボタンをクリックすると、4つのブートストラップタブが表示され、デフォルトで最初のタブ情報が表示されます。

しかし、最初のタブの情報を入力する代わりに2番目のタブをクリックすると、エラーメッセージが表示され、1番目のタブの情報を入力しない限り、いずれのタブもクリックできないようにすべきです。

最初のタブに必要な情報を入力した後、2番目のタブに移動する必要があります。最初のタブのユーザーが入力した情報は、保存ボタンをクリックするとデータベースに保存されますタブ。

Answer 1

あなたの質問に答えるには、フォームが満たされたときに取得できる簡単なスニペットを書きました。

isValid内では、すべてのカスタムコードを実行できます。

有効にするには、ブートストラップフォームを無効にしました。クラスまたはその他のCSSを追加せずに 'data-toggle = "タブ"を追加または追加しました。

フォームが満たされているかどうかをチェックするために、コントロールするフィールドに「必須」クラスを追加し、そのフィールドがnullでない場合に「クリック時」イベントをチェックする関数を作成しました。

またあなたのフォームを検証し、カスタムコードをコーディングするより少ない時間を過ごすために準備プラグインを実装する場合も、このリンク

http://formvalidation.io/examples/bootstrap-wizard/

function validateForm() { 
 
    
 
    var isValid = true; 
 
    $('#installationForm .form-group .required').each(function() { 
 
    if ($(this).val() === '') 
 
     isValid = false; 
 
    }); 
 
    return isValid; 
 

 
} 
 

 
$('.next-tab').on('click', function(event) { 
 
    var result = validateForm(); 
 
    if (result) { 
 
    $('.next a').attr('data-toggle', 'tab'); 
 
    
 
    } else { 
 
     $('.next a').removeAttr('data-toggle'); 
 
    alert('You have to fill the form before!'); 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<form id="installationForm" class="form-horizontal"> 
 
    <ul class="nav nav-pills"> 
 
     <li class="active"><a href="#basic-tab" data-toggle="tab">Site information</a></li> 
 
     <li class="next"><a class="next-tab" href="#database-tab" data-toggle="tab">Database</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
     <!-- First tab --> 
 
     <div class="tab-pane active" id="basic-tab"> 
 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Site name</label> 
 
       <div class="col-xs-5"> 
 
        <input type="text" class="required form-control" name="name" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">URL</label> 
 
       <div class="col-xs-7"> 
 
        <input type="text" class="required form-control" name="url" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Owner email</label> 
 
       <div class="col-xs-5"> 
 
        <input type="text" class="required form-control" name="email" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Description</label> 
 
       <div class="col-xs-7"> 
 
        <textarea class="required form-control" name="description" rows="6"></textarea> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <!-- Second tab --> 
 
     <div class="tab-pane" id="database-tab"> 
 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Server IP</label> 
 
       <div class="col-xs-5"> 
 
        <input type="text" class="form-control" name="dbServer" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Database name</label> 
 
       <div class="col-xs-5"> 
 
        <input type="text" class="form-control" name="dbName" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Database user</label> 
 
       <div class="col-xs-5"> 
 
        <input type="text" class="form-control" name="dbUser" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Password</label> 
 
       <div class="col-xs-5"> 
 
        <input type="password" class="form-control" name="dbPassword" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <!-- Previous/Next buttons --> 
 
     <ul class="pager wizard"> 
 
      <li class="previous"><a href="javascript: void(0);">Previous</a></li> 
 
      <li class="next"><a href="javascript: void(0);">Next</a></li> 
 
     </ul> 
 
    </div> 
 
</form> 
 

 
<div class="modal fade" id="completeModal" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog modal-sm"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
       <h4 class="modal-title">Complete</h4> 
 
      </div> 
 

 
      <div class="modal-body"> 
 
       <p class="text-center">The installation is completed</p> 
 
      </div> 
 

 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-success" data-dismiss="modal">Visit the website</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>