当使用Javascript按下submit按钮时，如何创建显示指向字段的验证错误的工具提示

所以我尝试创建一个带有Javascript验证的表单。我已经能够对所有字段进行验证，但是现在，我只在提交表单时在alert（）中显示错误

我想知道是否有一种方法可以创建一种指向该字段的工具提示，并说明在提交每个特定字段时发生的错误

我想我应该把这个错误保存在一个变量中，但我想用一种视觉上令人愉悦的方式来表示它

以下是我的一些代码：

<script>

function check_name_field(){
                var txtName = document.getElementById('txtName').value;
                if(txtName==""){
                    var errName = "Please enter your full name";
                    //some code to show a tool-tip of the error
                    return false;
                }
                else{
                    return true;
                }
            }

</script>

<form class="newUserLogin" id="newUserLogin" method="post" action="signNewVis.php" onsubmit="return check_name_field();">

<input type="text" name="Name_user" id="txtName">
<input type="submit" value="submit">    

</form>

函数检查\u名称\u字段（）{
var txtName=document.getElementById（'txtName'）.value；
如果（txtName==“”）{
var errName=“请输入您的全名”；
//一些代码显示错误的工具提示
返回false；
}
否则{
返回true；
}
}

---

您可以处理它，就像使用占位符（元素）在DOM中放置消息一样。使用CSS将该元素样式设置为工具提示。然后，您可以在相应的错误元素中包含一些代码，如

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

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

.style.display=“block”//显示
.style.display=“无”//隐藏

在发生错误时显示元素

---

上述解决方案不会定位错误元素并在错误时显示它。

您至少可以为组件添加标题值，如下所示：- 1） 创建具有绝对位置的div 2） 添加innerHtml作为上述错误消息 3） 将左上角的div设置为输入控件的div 4） 将其显示在控件附近或控件悬停时 5） 在单击外部后编写要删除的脚本

<script>

function check_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;

                    return false;
                }
                else{
                    return true;
                }
            }

</script>

函数检查\u名称\u字段（）{
var txtName=document.getElementById（'txtName'）；
如果（txtName.value==“”）{
var errName=“请输入您的全名”；
//div.innerHTML=errName；
//div.top=txtName.top；div.left=txtName.left；
返回false；
}
否则{
返回true；
}
}

如果表单已发送，则无法执行此操作。因此，（1）防止默认行为，（2）在CSS中创建工具提示和验证消息（3）执行验证，如果错误显示错误，否则允许提交。这是可以做到的，但如何准确地创建它们？我应该将div样式化为工具提示吗？你可以使用bootstrap，并在控件中添加工具提示以防失败，如@mbadeveloper所说，我将首先使用bootstrap或任何其他库以HTML和CSS创建tootip。然后添加JS行为，这里的答案似乎集中在JS行为上，所以搜索如何在so或其他网站上创建工具提示，并使用下面的答案创建行为，你不能在一篇文章中完成所有事情，我想这就是他们投票否决的原因。哦，好吧，我明白了。这是有道理的@carkod。谢谢帮助OK，所以我应该简单地创建一个div并发送错误以显示在该div中。然后将其样式设置为工具提示？但是，我对“div.top=txtName.top”现在是文本框控件的意思感到困惑，而div.top=txtName.top为工具提示div提供了与控件相同的坐标，因此div显示在控件上。