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

showing validation error message like tooltip

提问by user3482559

how to show validation message like the below shown images on a html form.

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

I tried in Web, but could not found like this validation. So though to ask you here, may be someone can help me with this.

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

I want to show valdation error message as shown in below image...

我想显示验证错误消息，如下图所示...

Please anyone help me...

请任何人帮助我...

---

---

OR LIKE THIS BELOW IMAGE

或喜欢下面的图片

---

---

回答by prabeen giri

If you are trying for your own javascript and you are new to it , then It would take a quite a bit of learning as you should be aware with playing with DOM elements and knowing other DOM behaviors. A quick solution would be using Jquery Library and Jquery Validation Plugin. There are so many Jquery Form validator which makes the use of tooltip to display error.

如果您正在尝试自己的 javascript 并且您不熟悉它，那么这将需要相当多的学习，因为您应该了解使用 DOM 元素并了解其他 DOM 行为。一个快速的解决方案是使用 Jquery 库和 Jquery 验证插件。有很多 Jquery 表单验证器使用工具提示来显示错误。

Some of them are :

他们之中有一些是 ：

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

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

回答by Andrei

On error display I would do it like this:

在错误显示上，我会这样做：

• Set position relative to the parent of the field.
• Append an absolute positioned div next to the field (in the same parent as the field)
• Set left:100% or right:100% on the div
• Set the content of the div to the error message

• 设置相对于字段父级的位置。
• 在字段旁边附加一个绝对定位的 div（与字段在同一个父级中）
• 在 div 上设置 left:100% 或 right:100%
• 将div的内容设置为错误信息

Now if you compress those steps you would get an HTML structure like.

现在，如果您压缩这些步骤，您将获得类似的 HTML 结构。

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

If don't want to add the additional "fieldWrapper" divsyou could set the top and left of the error message programmatically like this:

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

• Get the offsetTopof the field and the offsetLeft
• Add that offsets as the topand leftvalue of the error message.

• 获取offsetTop字段和offsetLeft
• 添加一个偏移量为top和left错误消息的价值。