3

我正在为一个迷你应用程序构建一个超级简单的注册表单，并认为如果可以的话，使用浏览器的内置 HTML5 验证会很有趣 - 所以我为表单 a 进行了文本输入以type="email"供娱乐。在 Chrome (27.0.1453.116) 中加载它并尝试输入无效的电子邮件（“lksjdf”或其他东西，你知道），当我尝试提交时，正如预期的那样，会弹出一条错误消息。但出乎意料的是验证消息从文本框偏移了大约 60 像素（给或取几个）（请注意，电子邮件字段处于活动状态，但错误消息似乎指向密码字段）：

奇怪的验证错误截图

如果我删除所有样式并仅保留标记，则验证消息位置会得到改善，但与表单字段上的边距和填充量有关：

第二张截图

当我在 Firefox 中重复该过程时，验证会正确显示。

当我们缩小问题范围时，似乎<h1>在表单标签之前有一个标签会导致问题出现 - 如果我删除<h1>标签，那么验证消息会正确排列。

这是 Chrome 中的错误吗？有没有办法可以强制 Chrome 的验证消息与输入正确对齐？为什么另一个标签会导致它不排队？

这是代码，因此您可以测试/验证：

<!DOCTYPE html>
<html>
  <head>
    <title>Sample App | Sign Up</title>
    <!-- stripped out styles and js -->
  </head>
  <body>
    <!-- stripped out other irrelevant markup -->
    <h1>Sign Up</h1>
    <form accept-charset="UTF-8" action="" id="new_user" method="post">
      <label for="user_name">Name</label>
      <input id="user_name" name="user[name]" size="30" type="text" />

      <label for="user_email">Email</label>
      <!-- This is the validation test field! -->
      <input id="user_email" name="user[email]" size="30" type="email" />

      <label for="user_password">Password</label>
      <input id="user_password" name="user[password]" size="30" type="password" />

      <label for="user_password_confirmation">Confirm Password</label>
      <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />

      <input class="btn btn-large btn-primary" name="commit" type="submit" value="Create my account" />
    </form>
  </body>
</html>
4

0 回答 0