title: validate the previous tab when click on new tab in bootstrap
body: <p>I am using bootstrap tabs in my code.</p>
  
  <p>I am writing my html code below:</p>
  
  <pre><code>&lt;form method="POST" class="form-horizontal" id="userUpdateForm"&gt;
    &lt;div class="tabbable"&gt;            
      &lt;div class="tab-content"&gt;
        &lt;ul class="nav nav-tabs" id="mainTabs"&gt;
          &lt;li class="active nohover"&gt;&lt;a href="#1A" data-toggle="tab"&gt;tab1&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nohover"&gt;&lt;a href="#1B" data-toggle="tab"&gt;tab2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="tab-pane active" id="1A"&gt;
          &lt;div class="control-group"&gt;
            &lt;label class="control-label" for="title"&gt;Field1:&lt;/label&gt;
            &lt;div class="controls"&gt;
              &lt;inpu type="text" name="field1" /&gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
              &lt;div id="titleError"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
            &lt;label class="control-label" for="title"&gt;Field2:&lt;/label&gt;
            &lt;div class="controls"&gt;
              &lt;inpu type="text" name="field2" /&gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
              &lt;div id="titleError"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="1B"&gt;
          &lt;div class="control-group"&gt;
            &lt;label class="control-label" for="title"&gt;Field3:&lt;/label&gt;
            &lt;div class="controls"&gt;
              &lt;inpu type="text" name="field3" /&gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
              &lt;div id="titleError"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
            &lt;label class="control-label" for="title"&gt;Field4:&lt;/label&gt;
            &lt;div class="controls"&gt;
              &lt;inpu type="text" name="field4" /&gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
              &lt;div id="titleError"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I have to validate the fields when I click on other tab,if the data is not valid it should stay in same tab.</p>
  
  <p>Can any one tell me how to do that by providing sample code.</p>
  
  <p>Please dont use any validation plugins,I need in javascript/jquery code to validate the data.</p>