javascript - 在 Bootstrap 中单击新选项卡时验证上一个选项卡

Question

我在我的代码中使用 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 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 代码中验证数据。

Answer 1

只需使用 e.preventDefault();

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

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