显示工具提示等验证错误消息

Question

如何在html表单上显示验证消息，如下图所示。

我在网上试过，但找不到这样的验证。所以虽然在这里问你，可能有人可以帮我这个。

我想显示valdation错误信息，如下图所示......

请有人帮助我......

---

或者就像这张图片一样

---

Answer 1

如果您正在尝试使用自己的javascript并且不熟悉它，那么您需要了解相关知识，因为您应该了解使用DOM元素并了解其他DOM行为。一个快速的解决方案是使用Jquery Library和Jquery Validation Plugin。有很多Jquery Form验证器，它使用工具提示来显示错误。

其中一些是：

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％或右：div上的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值。