显示验证错误消息，如工具提示

Question

如何显示验证消息，如下面显示的图像在HTML表单上。

我在网上试过，但是找不到像这样的验证。所以尽管在这里问你，可能有人可以帮助我。

我想告诉valdation错误信息如下图所示的图片

请人帮我...

---

或是像下面的图片

---

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

Answer 2

在错误显示我会做这样的：相对于父

• 设定位置领域的。
• 追加字段旁边（在相同的父作为字段）的绝对定位的div
• 设置左：100％或右：100％在div
• 的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。