title: Calling bootstrap alerts on form error
body: <p>I have the following HTML code for the alert div:</p>
  
  <pre><code>&lt;div id="formAlert" class="alert"&gt;  
    &lt;a class="close" data-dismiss="alert"&gt;×&lt;/a&gt;  
    &lt;strong&gt;Warning!&lt;/strong&gt; Make sure all fields are filled and try again.  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following JavaScript:</p>
  
  <pre><code>function validateForm(){
    var x=document.forms['register']['username'].value;
    if (x==null || x=="") {
      alert('This is an alert')
      return false;
          var alertDialog = document.getElementByid("formAlert");
          alertDialog.style.display = "block";
    }
  }
  </code></pre>
  
  <p>The problem with the code is that the alert is showing prematurely, even before the code is called. I can tell the alert is called when the default JavaScript alert box pops up. Ideally, when <code>validateForm()</code> is called, I want the alert to show up. <code>validateForm()</code> is called when the form is submit.</p>
  
  <p><strong>EDIT</strong>: As requested, here is the code triggering the validateForm():</p>
  
  <pre><code>&lt;form name="register" action="" onSubmit="return validateForm()" method="post"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now that I've solved the issue of calling it, how do I hide the div until it's called by the JavaScript, as it's already showing before the code executes.</p>