Php 尝试还原浏览器时验证位置错误

我几乎用客户端所需的两个登录框完成了我的页面，我对这些输入框使用了验证。我使用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!'
   });
});

$（文档）.ready（函数（）
{
$（“#表格1”）。提交（功能（事件）
{
var isValid=$.validate.form（此）；
返回有效；
});
$（“#电话”）。验证(
{
要求：正确，
键入：“自定义”，
参数：/$myregexvalidation/，
颜色文字：'#000000'，
颜色提示：“#00FF00”，
颜色错误：'#FF0000'，
颜色边框：'#808080'，
没有提示：是的，
font_系列：“Arial”，
字体大小：“13px”，
位置：'centerright'，
抵销额：0，
副职：0，
bubble_类：“bubbleleft”，
效果：“褪色”，
错误文字：“telemóvel válido简介！”
});
$（“#电子邮件”）。验证(
{
要求：正确，
键入：“自定义”，
参数：/$myregexvalidation/，
颜色文字：'#000000'，
颜色提示：“#00FF00”，
颜色错误：'#FF0000'，
颜色边框：'#808080'，
没有提示：是的，
font_系列：“Arial”，
字体大小：“13px”，
位置：'centerright'，
抵销额：0，
副职：0，
bubble_类：“bubbleleft”，
效果：“褪色”，
错误文字：“欢迎你给我发电子邮件给瓦利多！”
});
});

以及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>

远程水平
电子邮件

请在输入字段右侧为错误消息添加一个空白范围。然后使用js将错误添加到范围中。但如果它是正确的，你必须清除它。我还重新格式化了HTML，每个表单输入/标签/错误消息都封装在一个div中

<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>
        <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="">
        <span id="errorPhone" class="error">&nbsp;</span>
    </div>

    <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>
        <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="">
        <span id="errorEmail" class="error">&nbsp;</span>
    </div>
    <input type="submit" id="Button1" name="" value="Entrar" style="position:absolute;left:176px;top:93px;width:67px;height:32px;z-index:4;">
</form>

如果要清除它，只需在.text（）方法中使用“”。（只需在validate（）方法之前执行此操作

如果可能，请尝试使用.css文件中的样式表来设置浏览器的样式。这不仅可以改进HTML格式，还可以提高样式设置的效率。（

您所说的“恢复浏览器”是什么意思？

/* this text will appear in span with id errorPhone */
$("#errorPhone").text('Introduza um número de telemóvel válido!');

/* this in errorEmail */
$("#errorEmail").text('Por favor introduz um email válido!');