javascript - 使用工具提示进行 jQuery ASP 输入验证

Question

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

已找到解决方案here ，但我还需要向任何留空的字段添加工具提示。

我还想在每个工具提示中填充一条解释用户错误的消息。

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

注意:我没有时间尝试，请尝试让我知道这是否可以解决您的问题或至少以任何方式提供帮助:)