首先,我知道有很多方法可以做到这一点,所以如果它不符合我想在标题中说的话,请不要犹豫,发布你的解决方案。
我想为ASP.net文本框生成一个优雅的错误消息,在模糊(将元素的范围保留在jQuery中),如果它们没有通过验证。当然,一个很好的例子就是Stack Overflow本身,这里填写了一些不同的文本框。如果你选中它们而不填写它们或者不符合textBox的规格,那么它们旁边会弹出一个漂亮的错误信息,通常是在文本框的右上角,一旦你满足所需的规范就会立即消失
在这个例子中,我们正在查看名为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
}
});
我确实看了一下jQuery UI's tooltip,看起来与我想要的非常相似,但看起来它只出现在我的上面,而我希望我的出现在布尔上(并且只有在验证没有通过)。也许我还没有完全理解API。我还在网上找到了一些解决方案,只需在文本框旁边创建一个CSS div,将其隐藏在jQuery中,然后使其显示,这不是非常模块化但我认为很容易实现和自定义(如前所述,如果你的话解决方案的特点,但你真的很喜欢它,这很好!)。我更喜欢使用Javascript / jQuery / VB.net / ASP.net作为我的解决方案,因为我正在努力使事情更加动态并且使用这些语言允许我在整个网站中重用代码。
总结:我想为所有ASP.net文本框创建一个视觉上吸引人的,动态/模块化的,以及jQuery / .net代码中的礼貌错误消息onBlur(当用户从焦点转移到该元素时)。
来源,更新和编辑: