使用jQuery为blur上的ASP.net文本框生成工具提示错误消息

首先，我知道有很多方法可以做到这一点，所以如果你的解决方案不完全符合我在标题中所说的，请毫不犹豫地发布你的解决方案

如果ASP.net文本框未通过验证，我想在blur上为它们生成一条外观优雅的错误消息（保留jQuery中元素的范围）。当然，这方面的一个很好的例子是在这里填写一些不同的文本框时，堆栈溢出本身。如果您没有填写它们，或者不符合文本框的规格，则会在它们旁边弹出一条漂亮的错误消息，通常位于文本框的右上角，并且在满足所需规格后立即消失

在本例中，我们将看到一个名为OtherBox的ASP.net文本框。我已经制作了验证函数，它们工作正常，因此我有一个模板，用于放置代码，但我不知道最好/最模块化的方法：

$("#<%=OtherBox.ClientID %>").blur(function () {
    if (ValidationFunction(OtherBox)) {
        var OtherBoxError = document.getElementById('<%=OtherBoxError.ClientID %>');
        $(OtherBoxError).show();
        $(OtherBoxText).animate({ backgroundColor: "#FF9494" }, 200);
        //Additional code to make tooltip appear
    }
    else {
        var OtherBoxError = document.getElementById('<%=OtherBoxError.ClientID %>');
        $(OtherBoxError).hide();
        $(OtherBoxText).animate({ backgroundColor: "white" }, 200);
        //Additional code to make tooltip disappear
    }
});

$（“#”）模糊（函数（）{
if（验证函数（其他框））{
var OtherBoxError=document.getElementById（“”）；
$（OtherBoxError.show（）；
$（OtherBoxText）.animate（{backgroundColor:#FF9494“}，200）；
//显示工具提示的附加代码
}
否则{
var OtherBoxError=document.getElementById（“”）；
$（OtherBoxError.hide（）；
$（OtherBoxText）.animate（{backgroundColor:“white”}，200）；
//使工具提示消失的附加代码
}
});

我确实看了一下，它看起来很像我想要的，但看起来它只出现在MouseOver上，而我希望我的出现在Blur上（并且只有在验证未通过时）。也许我没有完全理解API。我还发现了一些在线解决方案，它们只需在文本框旁边创建一个CSS div，将其隐藏在jQuery中，然后将其显示出来，这不是很模块化，但我认为很容易实现和定制（正如我之前所说，如果您的解决方案具有此功能，但您确实喜欢它，那么这很好！）。我更喜欢使用Javascript/jQuery/VB.net/ASP.net作为我的解决方案，因为我正在努力使事情变得更加动态，使用这些语言可以让我在整个网站上重用代码

小结：我想在jQuery/.net代码中为所有ASP.net文本框和礼貌的错误消息onBlur（当用户不再关注该元素时）创建一个视觉上有吸引力的、动态的/模块化的

---

---

来源、更新和编辑：

Saj发布的示例使用mouseenter/mouseleave来确定何时显示消息，而我希望使用onBlur。然而，这是一个非常好的教程。