проверить предыдущую вкладку при нажатии новой вкладки в 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 code для проверки данных.

Answer 1

Просто используйте e.preventDefault();

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

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

Answer 2

Дополнительно к @Baadshah ответ,

Вы должны связать это, чтобы показать() событие, а затем у вас есть ссылки на активное и следующую вкладку.

Из документации:

пожары Этого события на закладку шоу, но перед новой вкладкой была показано. Используйте 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

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

    }