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中，可以通过两种不同的方式激活选项卡导航。

您可以在HTML中指定data-toggle="tab"来激活标签导航。
您可以借助.tab()函数使用JavaScript手动激活。

在您的示例中，您使用了data-toggle="tab"方法。这将自动激活选项卡导航，并且您对其行为的控制有限。为了根据某些验证标准控制其行为，您需要使用第二种方法来激活选项卡。

请参阅下面的代码以获取基本示例。在这里，我从HTML中删除了data-toggle="tab"，并使用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>

如何在验证时停止导航到引导程序选项卡的其他选项卡

1 个答案: