showing validation error message like tooltip [closed]

Question

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

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.

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

Please anyone help me...

---

OR LIKE THIS BELOW IMAGE

---

Answer 1

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

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

<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" divs you could set the top and left of the error message programmatically like this:

• Get the offsetTop of the field and the offsetLeft
• Add that offsets as the top and left value of the error message.