使用工具提示的jQuery ASP输入验证

Question

当前：成功执行输入验证。输入边界突出显示为红色，这正是我需要的。

这里找到了解决方案，但是我还需要在空白的任何字段中添加一个工具提示。

我也想用一个消息填充每个工具提示，以解释用户错误。

function validationHelper() {
   var isValid = true;
   $('#textBox1,#textBox2,#textBox3,#textBox4').each(function () {
        if ($.trim($(this).val()) == '') {
            isValid = false;
            $(this).css({
                "border": "1px solid red",
                "background": "#FFCECE"
                //do I add tooltip property here?
            });
        }
        else {
            $(this).css({
                "border": "",
                "background": ""
            });
        }
    });
    if (isValid == false) {
        return false;
    }
    return true;
}

我感谢任何建议。预先感谢。

Answer 1

我会推荐 bootstrap javascript库的工具提示。

您可以在HTML

中执行类似的事情

<input id="textBox1" type="text" title="Error text here" data-toggle="tooltip" data-placement="top">
<input id="textBox2" type="text" title="Error text here" data-toggle="tooltip" data-placement="top">
<input id="textBox3" type="text" title="Error text here" data-toggle="tooltip" data-placement="top">
<input id="textBox4" type="text" title="Error text here" data-toggle="tooltip" data-placement="top">

然后您的JavaScript激活工具提示将是（触发手册）

$(document).ready(function(){
   $('#textBox1,#textBox2,#textBox3,#textBox4').tooltip({'trigger':'manual'});
});

，您的功能将为

function validationHelper() {
   var isValid = true;
   $('#textBox1,#textBox2,#textBox3,#textBox4').each(function () {
        if ($.trim($(this).val()) == '') {
            isValid = false;
            $(this).css({
                "border": "1px solid red",
                "background": "#FFCECE"
            });
            $(this).tooltip('show');
        }
        else {
            $(this).css({
                "border": "",
                "background": ""
            });
            $(this).tooltip('hide');
        }
    });
    if (isValid == false) {
        return false;
    }
    return true;
}

阅读文档更改工具提示的位置（顶/底部...）或您要添加/删除的任何其他参数。

文档：http：//getbootstrap.com/javascript/#tooltips

Note ：我没有时间在小提琴中尝试它，请尝试让我知道是否可以解决您的问题或至少有任何帮助：）