Ok, it looks like the problem is that you are missing a bit of code that occurs in the head of the document. Just after the </title> tag you should add in this code:
<link href="WA_SecurityAssist/styles/Refined_Pacifica.css" rel="stylesheet" type="text/css" />
<link href="WA_SecurityAssist/styles/Arial.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.textfieldServerError {
display:inline;
margin:0px;
color:#CC3333;
border: 1px solid #CC3333;
}
-->
</style>
<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css">
I tested this with your page and was able to get the validation messages to show as they should when I put this code in just after the closing title tag.