顯示驗證錯誤消息，如工具提示

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。