尝试恢复浏览器时验证位置错误

我几乎用两个客户端所需的登录框完成了我的页面，我对这些输入框进行了验证。我使用HTML5、JavaScript和CSS。当我试图恢复浏览器时，错误消息显示在错误的位置时，我有点不高兴。

我想问一下，是否有任何解决方案可以使验证消息（错误消息）始终位于输入框旁边（例如自动定位）？所以当我们恢复浏览器时，错误消息总是停留在它的位置（输入框旁边），而不是像上面的图片那样分开！

这是代码：

<script type="text/javascript" src="script/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="script/wb.validation.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
   $("#Form1").submit(function(event)
   {
      var isValid = $.validate.form(this);
      return isValid;
   });
   $("#phone").validate(
   {
      required: true,
      type: 'custom',
      param: /$myregexvalidation/, 
      color_text: '#000000',
      color_hint: '#00FF00',
      color_error: '#FF0000',
      color_border: '#808080',
      nohint: true,
      font_family: 'Arial',
      font_size: '13px',
      position: 'centerright',
      offsetx: 0,
      offsety: 0,
      bubble_class: 'bubbleleft',
      effect: 'fade',
      error_text: 'Introduza um número de telemóvel válido!'
   });
   $("#email").validate(
   {
      required: true,
      type: 'custom',
      param: /$myregexvalidation/,
      color_text: '#000000',
      color_hint: '#00FF00',
      color_error: '#FF0000',
      color_border: '#808080',
      nohint: true,
      font_family: 'Arial',
      font_size: '13px',
      position: 'centerright',
      offsetx: 0,
      offsety: 0,
      bubble_class: 'bubbleleft',
      effect: 'fade',
      error_text: 'Por favor introduz um email válido!'
   });
});

和HTML:

<form name="contact" method="post" action="save.php" target="_self" id="Form1">
    <div id="wb_Text2" style="position:absolute;left:10px;top:15px;width:70px;height:34px;z-index:0;text-align:left;"> <span style="color:#F5FFFA;font-family:Arial;font-size:15px;">Telemóvel</span>
    </div>
    <input type="text" id="phone" style="position:absolute;left:82px;top:10px;width:155px;height:28px;line-height:28px;z-index:1;" name="phone" value="" maxlength="8" placeholder="">
    <div id="wb_Text3" style="position:absolute;left:10px;top:55px;width:62px;height:17px;z-index:2;text-align:left;"> <span style="color:#F5FFFA;font-family:Arial;font-size:15px;">E-mail</span>
    </div>
    <input type="text" id="email" style="position:absolute;left:82px;top:51px;width:155px;height:28px;line-height:28px;z-index:3;" name="email" value="" maxlength="50" placeholder="">
    <input type="submit" id="Button1" name="" value="Entrar" style="position:absolute;left:176px;top:93px;width:67px;height:32px;z-index:4;">
</form>
</div>