как перестать переходить на другие вкладки загрузочных вкладок при проверке

Question

я проверяю поля ввода одной вкладки при нажатии на вторую вкладку

пожалуйста, посмотрите мой HTML

                                    <ul class="nav nav-tabs makeblock" role="tablist">
                                        <li class="nav-item"> <a class="nav-link active" href="#StuAdmn" role="tab" data-toggle="tab">Admission</a> </li>
                                        <li class="nav-item" id="tabStudentGeneralDetails"> <a class="nav-link" href="#stuGenDetails" role="tab" data-toggle="tab">General </a> </li>
                                        <li class="nav-item"> <a class="nav-link" href="#stuParentDetails" role="tab" data-toggle="tab">Parent</a> </li>
                                        <li class="nav-item"> <a class="nav-link" href="#joingDetails" role="tab" data-toggle="tab">Joining</a> </li>
                                        <li class="nav-item"> <a class="nav-link" href="#stuAdrs" role="tab" data-toggle="tab">Address</a> </li>
                                        <li class="nav-item"> <a class="nav-link" href="#feeDetails" role="tab" data-toggle="tab">Fee </a> </li>

                                    </ul>
                                </div> 

//tab 1 div
<div role="tabpanel" class="tab-pane active fade in" id="StuAdmn">
    <div class="col-md-4">
         <label for="firstName"><span>*</span>First Name:</label>
         <input type="text" class="form-control only-alpha" placeholder="First Name" id="firstName">

       </div>
</div>
//tab 2 div
 <div role="tabpanel" class="tab-pane fade" id="stuGenDetails">
</div>

Я проверяю поле id="firstName" при нажатии на вкладку id="tabStudentGeneralDetails". Я не хочу переходить на выбранную вкладку, пока не будут проверены поля вкладки предыдущих вкладок.

я пробовал ниже код

$(document).on("click",".newSec #tabStudentGeneralDetails",function(e){
    var firstName=$(".newSec #firstName").val();
    if(firstName == "")
        {
        $(this).find("a").attr("aria-expanded",false);
            alert("Please enter student first name !"); 

        } 
});

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

Может ли кто-нибудь помочь с этим?

спасибо.

Answer 1

В Bootstrap навигацию по вкладкам можно активировать двумя различными способами.

• Вы можете указать data-toggle="tab" в своем HTML, чтобы активировать навигацию по вкладкам.
• Вы можете активировать вручную с помощью JavaScript с помощью функции .tab().

В вашем примере вы использовали метод data-toggle="tab". Это автоматически активирует навигацию по вкладкам, и вы имеете ограниченный контроль над ее поведением. Чтобы управлять его поведением на основе некоторых критериев проверки, вам нужно использовать второй метод для активации вкладок.

Пожалуйста, смотрите код ниже для базового примера. Здесь я удалил data-toggle="tab" из HTML и использовал JavaScript для активации вкладок. Я определил функцию isValid для проверки ошибок формы, и навигация по вкладкам будет работать только в случае устранения ошибок (в этом случае введите некоторые данные в поле ввода).

$('#myTab a').on('click', function(e) {
  e.preventDefault();
  if (isValid()) {
    $(this).tab('show');
  }
});

function isValid() {
  const text = $("#homeText").val();
  if (text.length === 0) {
    return false;
  }
  return true;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    Home Tab Content<br>
    <input type="text" id="homeText" /> Enter some value
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Tab Content</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Tab Content</div>
</div>