显示类似工具提示的验证错误信息

Question

如何在HTML表单中显示像下面这些图片所示的验证消息。

我在Web中尝试过，但没有找到这样的验证方式。因此想在这里询问，也许有人可以帮我解决。

我想像下面的图像一样显示验证错误消息......

请任何人帮帮我...

或者像下面这张图片一样：

- user3482559

---

每个人都喜欢Bootstrap。 - Liftoff

哇，那条点状的绿线是不是意味着验证消息在飞入视图时进行了循环。那太棒了。 - Evan Larsen

你的代码在哪里？ - Jabel Márquez

Answer 1

如果你正在尝试编写自己的JavaScript代码，而且是新手，那么这需要一些学习，因为你需要熟悉DOM元素的操作和其他DOM行为。一个快速解决方案是使用jQuery库和jQuery验证插件。有很多jQuery表单验证器可以使用，它们使用工具提示来显示错误信息。

其中一些包括：

http://thrilleratplay.github.io/jquery-validation-bootstrap-tooltip/ http://jqueryvalidationunobtrusivenative.azurewebsites.net/AdvancedDemo/Tooltip http://jquerytools.org/demos/tooltip/form.html
https://github.com/yairEO/validator
https://github.com/posabsolute/jQuery-Validation-Engine

- prabeen giri

Answer 2

对于错误显示，我会这样操作：

• 将字段的位置设置为相对于其父元素。
• 在与该字段相同父级的位置附加一个绝对定位的div元素。
• 在该div元素上设置left:100%或right:100%的属性值。
• 将该div元素的内容设置为错误消息。

现在，如果您压缩这些步骤，您将得到以下HTML结构：

<div class="fieldWrapper" style="position: relative;">
    <input ....>
    <div class="errorMessage" style="position:absolute; left:100%;"> Error message </div>
</div>

如果不想添加额外的"fieldWrapper" divs，您可以通过编程方式设置错误消息的顶部和左侧位置，方法如下：

• 获取字段的offsetTop和offsetLeft
• 将这些偏移量添加为错误消息的top和left值。

- Andrei