How Do I Create A Tooltip Showing A Validation Error Pointing To A Field When The Submit Button Is Pressed Using Javascript

So I am trying to create a form with Javascript validation. I have been able to do validation for all the fields but for now, I have only shown the errors in an alert() when I subm

Solution 1:

The least you can do is to add title value for the component as follows:- 1) Create a div with absolute position 2) Add innerHtml as the above error msg 3) set div top left as that of input control 4) display it near the control or on hover of the control 5) write script to remove once click outside

<script>functioncheck_name_field(){
                var txtName = document.getElementById('txtName');
                if(txtName.value==""){
                    var errName = "Please enter your full name";
                    //div.innerHTML = errName;//div.top =txtName.top; div.left= txtName.left;returnfalse;
                }
                else{
                    returntrue;
                }
            }

</script>

Solution 2:

You can handle it, like have the placeholder(element) to place your message in DOM. Do some CSS to style that element as tooltip. And then you can include some code to the respective error element like

<element>.style.display = "block"; // to show

<element>.style.display = "none"; // to hide

to show the element when the error occurs.

The solution above does positioning the error element and showing it on error.