Question

我在这里遇到了严重的困境，我在输入标签上使用了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”

Answer 1

我会将你的覆盖改为这样的：

$("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');
                }
        });
    });
});

并更改您的所有输入以使用类（.formName）而不是id（#formName）

Bootstrap Tooltip手动触发器无法正常工作

1 个答案: