0

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

1 回答 1

0

请在输入字段的右侧为您的错误消息添加一个空范围。然后使用js将错误添加到span中。但如果它是正确的，你必须清除它。我还稍微重新格式化了您的 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>

然后在 js 中，在 validate() 方法中，

/* 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!');

如果要清除它，只需在 .text() 方法中使用 '' 即可。（只需在 validate() 方法之前执行此操作。

如果可能，请尝试使用 .css 文件中的样式表来设置浏览器的样式。这不仅会改进 HTML 格式，还会使样式更有效。（这里有一个小教程）

于 2013-08-09T07:29:35.630 回答