javascript - 用于验证的 jQueryUI 工具提示

Question

我使用 jQueryUI 工具提示进行验证。

我只想完全做到这一点:当文本框 focusout 或 sumbit 按钮单击空文本框工具提示时出现。我写了这个脚本但是这个脚本有这个问题:

1. 在文本框中单击或鼠标悬停或鼠标移开时，工具提示不会出现。仅出现在 focusout 或 sumbit 按钮上

2. 工具提示不会消失，只是在用户点击它时消失。

Fiddler Link

    .errorClass { border:  1px solid red; }
<div id="#tooltip">
<lable ><input id="FName" name="FName" type="text" title="my FName" />
<br/><br/>
    <input id="Post" maxlength="200" name="Post" title="my Post" type="text" value=""><br/><br/>
         <input type="submit" value="sumbit" class="insertBtn" onclick="return ISValidInfo()" />
        <div>
 $(function () {
        $("#tooltip").tooltip().off("mouseover mouseout ");      
        $("#FName").focusout(function () {
            ISValidFname();
        });
        $("#Post").focusout(function () {
            ISValidPost();
        });
        function ISValidFname() {
            if (!$.trim($('#FName').val())) {
                $("#FName").addClass("errorClass")
                $("#FName").tooltip({
                    position: {
                       at: "right top",
                        my: "left bottom",
                    }
                });
                $("#FName").tooltip("open");
            }
            else {
                $("#FName").removeClass("errorClass")
            }
        }
        function ISValidPost() {
            if (!$.trim($('#Post').val())) {
                $("#Post").addClass("errorClass")
                $("#Post").tooltip({
                    position: {
                        at: "right top",
                        my: "left bottom",
                    }
                });
                $("#Post").tooltip("open");
            }
            else {
                $("#Post").removeClass("errorClass")
            }
        }

    function ISValidInfo() {
        ISValidFname();
        ISValidPost();
    }
});

Answer 1

这是一个 FIDDLE这可能会有所帮助。

我把定义好的函数移出了主函数，改了几行。

JS

$(function () {
      $("#tooltip").tooltip();      
      $("#FName").focusout(function () {
                                        ISValidFname();
                                        });
      $("#Post").focusout(function () {
                                        ISValidPost();
                                        });
});

function ISValidFname()
{
 if ( !$.trim($('#FName').val() ) )
    {
     $("#FName").addClass("errorClass")
     $("#FName").tooltip({
                          position: {
                                     my: "left top",
                                     at: "right top"
                                     }
                          });
     $("#FName").tooltip("open");
     } else {
             $("#FName").removeClass("errorClass")
             }
}

function ISValidPost()
{
 if (!$.trim($('#Post').val())) {
            $("#Post").addClass("errorClass")
            $("#Post").tooltip({
                                position: {
                                           my: "left top",
                                           at: "right top"
                                           }
                                });
            $("#Post").tooltip("open");
            } else {
                    $("#Post").removeClass("errorClass")
                    }
}

function ISValidInfo()
{
  ISValidFname();
  ISValidPost();
}