Javascript 在引导中单击“新建”选项卡时验证上一个选项卡
我正在代码中使用引导选项卡 我正在下面编写我的html代码:Javascript 在引导中单击“新建”选项卡时验证上一个选项卡,javascript,jquery,validation,twitter-bootstrap,Javascript,Jquery,Validation,Twitter Bootstrap,我正在代码中使用引导选项卡 我正在下面编写我的html代码: <form method="POST" class="form-horizontal" id="userUpdateForm"> <div class="tabbable"> <div class="tab-content"> <ul class="nav nav-tabs" id="mainTabs"> <li cl
<form method="POST" class="form-horizontal" id="userUpdateForm">
<div class="tabbable">
<div class="tab-content">
<ul class="nav nav-tabs" id="mainTabs">
<li class="active nohover"><a href="#1A" data-toggle="tab">tab1</a></li>
<li class="nohover"><a href="#1B" data-toggle="tab">tab2</a></li>
</ul>
<div class="tab-pane active" id="1A">
<div class="control-group">
<label class="control-label" for="title">Field1:</label>
<div class="controls">
<inpu type="text" name="field1" />
<p class="help-block"></p>
<div id="titleError"></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="title">Field2:</label>
<div class="controls">
<inpu type="text" name="field2" />
<p class="help-block"></p>
<div id="titleError"></div>
</div>
</div>
</div>
<div class="tab-pane" id="1B">
<div class="control-group">
<label class="control-label" for="title">Field3:</label>
<div class="controls">
<inpu type="text" name="field3" />
<p class="help-block"></p>
<div id="titleError"></div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="title">Field4:</label>
<div class="controls">
<inpu type="text" name="field4" />
<p class="help-block"></p>
<div id="titleError"></div>
</div>
</div>
</div>
</div>
</div>
</form>
字段1:
字段2:
字段3:
字段4:
我必须在单击其他选项卡时验证字段,如果数据无效,则应保留在同一选项卡中
任何人都可以通过提供示例代码来告诉我如何做到这一点
请不要使用任何验证插件,我需要javascript/jquery代码来验证数据。只需使用
e.preventDefault()代码>
除了@Baadshah答案
您应该将此绑定到show()事件,然后可以引用活动选项卡和下一个选项卡
从文件中:
此事件在tab show(选项卡显示)时触发,但在显示新选项卡之前触发。使用event.target和event.relatedTarget分别以活动选项卡和上一个活动选项卡(如果可用)为目标
以及守则:
$('a[data-toggle="tab"]').on('show', function (e) {
e.target; // activated tab
e.relatedTarget; // previous tab
});
通过考虑上述两个答案,我解决问题的方法如下:
var oldTab = e.relatedTarget.href; // previous tab url
var oldTabValue=oldTab.split("#");
if (oldTabValue[1] == '1A'){
var tab1flag = validateTab1();
if(tab1flag )
{
if(!flag)
{
e.target;
}
return;
}
else
{
e.relatedTarget;
e.preventDefault();
return;
}
}
但是我怎么知道哪一个是我当前的标签呢。默认情况下,tab1将处于活动状态,如果我单击tab2,如果tab1没有有效数据,它将显示验证消息。如何完成,您能告诉我更多吗explanation@user1268130什么??您的选项卡没有任何id或类?
var oldTab = e.relatedTarget.href; // previous tab url
var oldTabValue=oldTab.split("#");
if (oldTabValue[1] == '1A'){
var tab1flag = validateTab1();
if(tab1flag )
{
if(!flag)
{
e.target;
}
return;
}
else
{
e.relatedTarget;
e.preventDefault();
return;
}
}