javascript - フォーム エラー時にブートストラップ アラートを呼び出す

Question

アラート div の次の HTML コードがあります。

<div id="formAlert" class="alert">  
  <a class="close" data-dismiss="alert">×</a>  
  <strong>Warning!</strong> Make sure all fields are filled and try again.  
</div>

そして、次の JavaScript:

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

コードの問題は、コードが呼び出される前であっても、アラートが時期尚早に表示されることです。デフォルトの JavaScript アラート ボックスが表示されたときにアラートが呼び出されることがわかります。validateForm()が呼び出されたときに、アラートが表示されるようにするのが理想的です。validateForm()フォームの送信時に呼び出されます。

編集: 要求に応じて、validateForm() をトリガーするコードを次に示します。

<form name="register" action="" onSubmit="return validateForm()" method="post">
</form>

呼び出しの問題を解決したので、コードが実行される前に既に表示されているため、JavaScript によって呼び出されるまで div を非表示にするにはどうすればよいですか。