謙卑式jQuery檢核-動態訊息

在先前介紹過的Unobtrusive Validation(謙卑式檢核)寫法,我們都是用data-val-ruleName="檢核失敗訊息"的方式指定檢核失敗時要顯示的訊息文字。但在實務情境下,檢核訊息常需依使用者選擇或輸入的內容不同而顯示不同的訊息,以提高介面親和力。(例如: "您輸入的字串過長,請刪去5個字元"、"12345不是一個有效的使用者名稱"、"2011/99/31是哪門子鬼日期,再亂搞信不信老子劈死你!"... 等等,訊息中搭配使用者輸入內容,更能精確陳述問題所在。)

針對遠端檢核及自訂規則,jQuery Validation本來就支援動態訊息。在遠端檢核時,可透過回傳雙引號包覆的字串,覆寫原有的錯誤訊息,達到動態變動訊息內容的目的(細節可參考舊文);而自訂規則要使用動態訊息,只需做點小調整就好: (自訂規則的細節也請參考舊文)

  1. 指定規則Attribute時,設為data-val-ruleName="*",因訊息是由規則邏輯決定,這裡填入*或任意非空白字串均可。 (但不可填空白或空字串,否則檢核不會被啟用)
  2. 在規則邏輯中,以this.settings.messages[elem.name]指定動態產生的失敗訊息

以下是一個範例,模擬多幣別運費輸入欄位的檢核。當幣別為台幣、美金、歐元時,各有1000, 30, 25元的上限,我們希望在使用者輸入超過上限時,可顯示"超過某幣別金額上限nnnn"的失敗訊息。

<!DOCTYPE html>
 
<html>
<head>
    <title>動態檢核訊息</title>
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.validate.js"></script>
    <script src="Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="Scripts/jquery.validate.inline.js"></script>
    <link href="Content/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script>
        jQuery.validator.addMethod("custValdRule",
            function (value, elem, params) {
                var $curr = $("#curr option:selected");
                var maxValue = parseFloat($curr.data("maxValue"));
                if (value > maxValue) {
                    //動態變更檢核訊息內容
                    this.settings.messages[elem.name] = 
                        "超過" + $curr.text() + "金額上限" + maxValue;
                    return false;
                }
                return true;
            }, '');
        jQuery.validator.unobtrusive.adapters.add(
            "custChk", [],
            function (options) {
                options.rules["custValdRule"] = true;
                options.messages['custValdRule'] = options.message;
            });
        $(function () {
            $("#form1").makeValidationInline();
            $("#curr").change(function () {
                //利用focusout()觸發檢核
                $("#amount").focusout();
            });
        });
    </script>
    <style>
        body,table,input { font-size: 9pt; }
        td { border: 1px solid gray; padding: 5px; }
    </style>
</head>
<body>
<form id="form1" method="get" action="">
    <table style="margin-top: 30px;">
        <tr>
        <td style="width: 80px; text-align: right; vertical-align: baseline;">
        運費設定
        </td>
        <td style="width: 150px">
        <select id='curr'>
            <option value="TWD" data-max-value="1000">TWD</option>
            <option value="USD" data-max-value="30">USD</option>
            <option value="EUR" data-max-value="25">EUR</option>
        </select>                    
        <input type="text" id="amount" name="amount" size="4" maxlength="4"
         style="text-align: right"
         data-val = "true" data-val-required="請填寫金額" data-val-custChk="*" />
        </td>
        </tr>
    </table>
    <input type="submit" value="送出" />
</form>
</body>
</html>

執行結果如上,很簡單吧!

PS: 圖中檢核訊息以紅底白字浮現在右上角的效果來自ASP.NET MVC Inline Validation Plugin

歡迎推文分享:
Published 21 October 2011 12:27 AM 由 Jeffrey
Views: 12,787



意見

# arthas said on 06 December, 2011 08:52 PM

黑大好 請問一下可單獨提供

jquery.validate.inline.js 這個檔案嗎?

謝謝!!

# Jeffrey said on 07 December, 2011 07:18 PM

to arthas, 你有在用Visual Studio嗎? 最快取得文章套件相關程式的做法是透過NuGet,你可以搜尋"aspnetmvcinlinevalidation"進行下載安裝,接著在Scripts目錄就可以找到相關JS檔案,如果取得有困難歡迎再提出來。

# Thomas said on 30 October, 2016 08:52 AM

黑大好:使用jQuery.validator.addMethod後,jquery.validate.inline就會不正常

# Jeffrey said on 30 October, 2016 08:41 PM

to Thomas,能否試著在Plunker重現你說的問題?https://plnkr.co/

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<October 2011>
SunMonTueWedThuFriSat
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication