引导工具提示手动触发不工作

Bootstrap Tooltip manual trigger not working

本文关键字:工作 工具提示      更新时间:2023-09-26

我在这里面临着一个严重的困境,我在输入标签上使用了bootstrap工具提示来进行表单验证,即当有表单验证错误时,工具提示会自动出现在输入标签周围,问题是

1)工具提示只在第二次调用onBlur时出现或触发,尽管它应该在第一次光标离开输入标签时出现,代码为
$("input#formName").each(function() {
     $("#formName").on("blur",this, function(){
        var x=document.getElementById("formName").value;
        //
        if (x==null || x=="")
        {
          var error = "Name Must Not Be Empty"; 
          $('#formName').tooltip({
            trigger: 'manual',
            title: error
            }).on({
                blur: function() {
                    $(this).tooltip('show');
                },
                focus: function() {
                    $(this).tooltip('hide');
                }
            });
        }else{
            $('#formName').data('tooltip',false);
        }
    });
        $("#formName").on("blur",this, function(){
            var y=document.getElementById("formName").value;
            if (y.length < 6){
                var error2 = "Length of Name Must Br Greater than 6";
                $('#formName').tooltip({
                trigger: 'manual',
                title: error2
                }).on({
                    blur: function() {
                        $(this).tooltip('show');
                    },
                    focus: function() {
                        $(this).tooltip('hide');
                    }
                });
            }else{
                $('#formName').data('tooltip',false);
            }
        })
});

2)我在这里有两个检查,上面的代码只工作一次,而不是每次当光标离开特定的输入标签时,如在代码中,即如果第二个条件被触发,之后我留下它为空,它应该触发第一个函数即"名称不得为空",而不是"长度不得大于6"

我会把你的重写改成这样:

$("input#formName").each(function() {
     var $this = $(this);
     $this.on("blur",this, function(){
        var x = $this.val();
        var error;
        if (x==null || x=="") { error = "Name Must Not Be Empty"; }
        elseif (x.length < 6) { error = "Length of Name Must Br Greater than 6"; }
        $this.tooltip({
            trigger: 'manual',
            title: error
            }).on({
                blur: function() {
                    $(this).tooltip('show');
                },
                focus: function() {
                    $(this).tooltip('hide');
                }
        });
    });
});

并将所有输入更改为使用class(.formName)而不是id(#formName)