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

单击第二个选项卡时，我正在验证第一个选项卡的输入字段

请查看我的html

通过上面的代码，我可以验证第一个选项卡的字段，但不能在第一个选项卡数据不合适时停止移动到单击的选项卡

有人能帮忙吗

---

谢谢。

在引导中，选项卡导航可以通过两种不同的方式激活

• 您可以在HTML中指定

  data toggle=“tab”

  ，以激活选项卡导航
• 您可以在

  .tab（）

  函数的帮助下使用JavaScript手动激活

在您的示例中，您使用了

data toggle=“tab”

方法。这将自动激活选项卡导航，您对其行为的控制有限。 为了根据某些验证条件控制其行为，需要使用第二种方法激活选项卡

有关基本示例，请参见下面的代码。在这里，我从HTML中删除了

data toggle=“tab”

，并使用JavaScript激活了这些选项卡。我已经定义了一个

isValid

函数来检查表单错误，只有在错误得到解决时，选项卡导航才会工作（在这种情况下，在输入字段中输入一些数据）

$（'myTab a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（isValid（））{
$（this.tab（'show'）；
}
});
函数isValid（）{
常量文本=$（“#homeText”）.val（）；
如果（text.length==0）{
返回false；
}
返回true；
}

主页选项卡内容

输入一些值
配置文件选项卡内容
联系人选项卡内容

在引导中，选项卡导航可以通过两种不同的方式激活

• 您可以在HTML中指定

  data toggle=“tab”

  ，以激活选项卡导航
• 您可以在

  .tab（）

  函数的帮助下使用JavaScript手动激活

在您的示例中，您使用了

data toggle=“tab”

方法。这将自动激活选项卡导航，您对其行为的控制有限。 为了根据某些验证条件控制其行为，需要使用第二种方法激活选项卡

有关基本示例，请参见下面的代码。在这里，我从HTML中删除了

data toggle=“tab”

，并使用JavaScript激活了这些选项卡。我已经定义了一个

isValid

函数来检查表单错误，只有在错误得到解决时，选项卡导航才会工作（在这种情况下，在输入字段中输入一些数据）

$（'myTab a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（isValid（））{
$（this.tab（'show'）；
}
});
函数isValid（）{
常量文本=$（“#homeText”）.val（）；
如果（text.length==0）{
返回false；
}
返回true；
}

主页选项卡内容

输入一些值
配置文件选项卡内容
联系人选项卡内容

Vivek在回答这个问题时添加了event.stopImmediatePropagation（）来代替preventDefault（）方法。你为什么这么说@KevinSunny@Vivek感谢您的回答，但如果导航为false，我无法停止导航。（不要使用bale覆盖引导程序的导航）@bharathvarma确保您已从html中删除

data toggle=“tab”

。在Vivek的回答中添加event.stopImmediatePropagation（）将更理想地替代preventDefault（）方法，你为什么这么说@KevinSunny@Vivek感谢您的回答，但如果导航为假，我无法停止导航。（不要使用bale覆盖引导程序的导航）@bharathvarma确保您已从html中删除

data toggle=“tab”

。

                                    <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>

$(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 !"); 

        } 
});