在引导程序中单击新选项卡时验证上一个选项卡答案

【问题标题】：validate the previous tab when click on new tab in bootstrap在引导程序中单击新选项卡时验证上一个选项卡
【发布时间】：2013-06-03 07:30:45
【问题描述】：

我在我的代码中使用引导选项卡。

我在下面写我的html代码：

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

当我点击其他选项卡时，我必须验证字段，如果数据无效，它应该保留在同一个选项卡中。

谁能告诉我如何通过提供示例代码来做到这一点。

请不要使用任何验证插件，我需要在 javascript/jquery 代码中验证数据。

【问题讨论】：

标签： javascript jquery validation twitter-bootstrap

【解决方案1】：

只需使用e.preventDefault();

$("tabSelector").click(function() {
      if(validation condition){
         e.preventDefault();
      }
    });

http://api.jquery.com/event.preventDefault/

【讨论】：

但是我怎么知道哪个是我当前的标签。默认情况下，tab1 将处于活动状态，如果我单击 tab2，如果 tab1 没有有效数据，它应该显示验证消息。它是如何完成的，你能告诉更多的解释
@user1268130 什么？？你的标签没有任何 id 或类？

【解决方案2】：

除了@Baadshah 的回答，

您应该将此绑定到 show() 事件，然后您可以引用活动标签和下一个标签。

来自文档：

此事件在标签显示时触发，但在新标签显示之前。使用 event.target 和 event.relatedTarget 分别定位活动选项卡和上一个活动选项卡（如果可用）。

还有代码：

$('a[data-toggle="tab"]').on('show', function (e) {
  e.target; // activated tab
  e.relatedTarget; // previous tab
});

http://twitter.github.io/bootstrap/javascript.html#tabs

【讨论】：

【解决方案3】：

通过考虑以上两个答案，我解决了以下问题：

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

    }

【讨论】：