在使用ASP.NET驗證控件時,我習慣將Validator的Text屬性設成"*",以避免驗證失敗時,TextBox後方直接串接又臭又長的提示訊息,會破壞排版影響美觀。因此當驗證失敗時,輸入欄位後方只會出現一個紅色的星號,完整的訊息,則另外加掛ValidationSummary合併顯示在上方或下方[補充參考: MSDN],如以下的範例:

    <form id="form1" runat="server">
    Name: <asp:TextBox ID="txtName" runat="server" />
    <asp:RequiredFieldValidator ID="rfv1" runat="server" ControlToValidate="txtName"
     ErrorMessage="Name is required!" Text="*" />
     <br />
    Team: <asp:TextBox ID="txtTeam" runat="server" />
    <asp:RequiredFieldValidator ID="rfv2" runat="server" ControlToValidate="txtTeam"
     ErrorMessage="Team is required!" Text="*" />
     <br />
    <asp:Button ID="btnSend" runat="server" Text="Send" />
    <asp:ValidationSummary ID="vs" runat="server" />
    </form>

不過這樣子有個小缺點,如果同時多筆驗證錯誤,使用者得玩連連看將ValidationSummary裡的項目跟輸入欄位後的星號一一對映起來,不如將訊息直接放在欄位後方來得直覺。所以我有個點子,除了在下方彙總顯示驗證失敗訊息外,如果讓滑鼠移至"*"時也能同步顯示該筆驗證失敗訊息,應該會更貼心吧! 另外,我還想為"*"加上閃爍效果吸引使用者注意,應該也是不錯的主意。

這個構想很簡單,自然難不倒jQuery,加入幾行Javascript程式碼,以具有errormessage屬性的span當條件找到所有驗證器元素,取出errormessage設定為span的title,再加上setInterval不斷toggle事先用<span>包起來的*,就可以做到讓"*"閃爍外加滑鼠移過會出現提示訊息的效果囉!

程式範例如下:

    <script type="text/javascript">
        $(function () {
            $("span[errormessage]")
            .addClass("aspNetVldrMark") //add class mark for latter access
            .each(function () {
                var $spn = $(this);
                //set errormessage as title to display when hover
                $spn.attr("title", $spn.attr("errormessage"))
                //add wrapper on innerText
                .html("<span>" + $spn.html() + "</span>");
            });
            //blinking effect
            setInterval(function () {
                $("span.aspNetVldrMark > span").toggle();
                //or blink only the visible spans
                //$("span.aspNetVldrMark").filter(function () {
                //    return this.style.visibility == "visible";
                //}).children("span").toggle();
            }, 400);
        });
    </script>

應用相同的原理,還可以玩出更多新奇有趣的變化。上面範例中提到可用style.visibility偵鎖錯誤訊息為顯示或隱藏的技巧,可用來做為觸發時機,讓我們加入自訂邏輯搞東搞西。另外,透過驗證器span的controltovalidate屬性,還可取得驗證器所指向的元素Id,如此便能直接對它動手動腳囉!

以下這個例子會在出現驗證失敗時改變TextBox的背景色,並將其title設成錯誤訊息。再進一步延伸,要加入動畫呈現或是用CSS玩一些華麗的視覺特效也非難事,大家就自由發揮囉!

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"
            type="text/javascript"></script>    
    <style type="text/css">
        .errHint { background-color: #ffaaaa; }
    </style>
    <script type="text/javascript">
        $(function () {
            $("span[errormessage]")
            .addClass("aspNetVldrMark") //add class mark for latter access
            .each(function () {
                var $spn = $(this);
                //set errormessage as title to display when hover
                $spn.attr("title", $spn.attr("errormessage"));
            });
            //blinking effect
            var onOff = true;
            setInterval(function () {
                $("span.aspNetVldrMark").each(function () {
                    var check = this.style.visibility == "visible";
                    var $spn = $(this);
                    //get the element of ControlToValidate
                    var $target = $("#" + $spn.attr("controltovalidate"));
                    //toggle error hint effect, this example uses background-color and title,
                    //but you can add a lot of fancy effects here
                    if (!check)
                        $target.removeAttr("title").removeClass("errHint");
                    else if (!$target.hasClass("errHint"))
                        $target.attr("title", $spn.attr("title"))
                        .toggleClass("errHint");
                });
            }, 500);
        });
    </script>


Comments

Be the first to post a comment

Post a comment