title: Popovers dissapear on 'onClick' event
body: <p>I've implemented few popovers and I try to trigger them thourgh a function which is called by onclick event.
  I have no idea why, but they dissappear in a second.I actually managed to get them work fine when checking each one, but when user press "submit" button, it disappers.
  any idea how and 
  HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function fieldValidation(textBox){
  
      if (textBox.value === "" || textBox === "") {
          textBox.style.borderColor = "red";
          $(textBox).popover('show');
      }
      else {
          $(textBox).popover('hide');
          textBox.style.borderColor = "green";
      }
  }
  
  function formValidation(){
      var fields = document.getElementsByClassName("personal").length;
      var current, check = true;
      for (var index = 0; index &lt; fields ; index++) {
          current = document.getElementsByClassName("personal")[index];
          if(current.value === "") {
              fieldValidation(current);
              check = false;
          }
      }
      if (!check)
          return;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Academic Calculator&lt;/title&gt;
      &lt;meta name="Calculator" content="Academic Calculator"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="Libs/bootstrap.css"&gt;
      &lt;script src="Libs/http_code.jquery.com_jquery-2.0.0.js"&gt;&lt;/script&gt;
      &lt;script src="Libs/bootstrap.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="Calculate.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="calculatorLogic.js"&gt;&lt;/script&gt;
      &lt;div&gt;&lt;h1&gt;Academic Calculator&lt;/h1&gt;&lt;/div&gt;
      &lt;div class="container-fluid"&gt;
          &lt;hr&gt;
          &lt;div class="row"&gt;
              &lt;form&gt;
                  &lt;div class ="col-lg-1 col-md-2 col-sm-2 col-xs-12" &gt;
                      &lt;input class="personal" placeholder="First Name:" data-toggle="popover"
                           data-content="Please Fill First Name Correctly" onblur="fieldValidation(this)"
                          data-placement="top"&gt;
                  &lt;/div&gt;
                  &lt;div class ="col-lg-1 col-md-2 col-sm-2 col-xs-12"&gt;
                      &lt;input class="personal" placeholder="Last Name:" data-toggle="popover"
                       data-content="Please Fill Last Name Correctly" onblur="fieldValidation(this)"
                      data-placement="top"&gt;
                  &lt;/div&gt;
                  &lt;div class = "col-lg-1 col-md-2 col-sm-2 col-xs-12"&gt;
                      &lt;input class="personal" placeholder="Academic Institute:" data-trigger="popover"
                       data-content="Please Fill Academic Institute Correctly" onblur="fieldValidation(this)"
                      data-placement="top"&gt;
                  &lt;/div&gt;
                  &lt;div class = "col-lg-1 col-md-2 col-sm-2 col-xs-12"&gt;
                      &lt;input class="personal" placeholder="School:" data-trigger="popover"
                     data-content="Please School Institute Correctly" onblur="fieldValidation(this)"
                      data-placement="top"&gt;
                  &lt;/div&gt;
                  &lt;div class = "col-lg-1 col-md-2 col-sm-2 col-xs-12 start-btn"&gt;
                      &lt;input type="submit" class="submit" onclick="formValidation()"&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;div class="courses"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
   I hope I've I've entered the code correcly, first time doing it with snippet.</p>