網頁介面有時會有"使用者必須勾選某個CheckBox"的檢核要求,例如: 要求使用者確認已閱讀過並同意授權聲明或免責條款。若要使用謙卑式jQuery檢核實現,直覺想到的就是為<inpu type="checkbox">加上data-val=”true”及data-val-required="請勾選",理論上應該可行。

排版顯示純文字
<!DOCTYPE html>
 
<html>
<head>
    <title>CheckBox必勾檢核</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js" 
     type="text/javascript"> </script>   
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js" 
     type="text/javascript"> </script>   
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" 
     type="text/javascript"> </script>   
    <link href="Content/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.validate.inline.js" type="text/javascript"> </script>
    <script type="text/javascript">
        $(function () {
//REF: http://blog.darkthread.net/post-2011-07-04-asp-net-mvc-inline-validation-chinese.aspx
            $("form").makeValidationInline();
        });
    </script>
</head>
<body style="padding: 50px; font-size: 9pt;">
<form id="form1" action="test.htm" method="get">
文字欄位: <input type="text" id="t1" name="t1" data-val="true" data-val-required="不可空白" />
<div style="margin-top: 10px;">
<textarea style="width: 260px; height: 50px;">
各人造業各人擔...各人造業各人擔...各人造業各人擔...各人造業各人擔...各人造業各人擔...各人造業各人擔...
</textarea>
<br />
<input type="checkbox" id="c1" name="c1" data-val="true" data-val-required="請勾選已閱讀" />
<span>我已閱讀並接受"美股投公司服務條款及免責聲明"</span>
</div>
<input type="submit" value="送出" />
</form>
</body>
</html>

天不從人願,執行後發現data-val-required="..."套用在<input type=”checkbox”>不會發揮任何效果。(檢核失敗訊息浮在欄位右上方的效果來自這個NuGet程式包)

追進jquery.validate.unobtrusive.js,才發現一件事。required規則刻意迴避了CheckBox,難怪jquery.validate.js裡明明有required配合CheckBox的邏輯,但透過data-val-required指定卻始終無法生效。

排版顯示純文字
    adapters.add("required", function (options) {
        // jQuery Validate equates "required" with "mandatory" for checkbox elements
        if (options.element.tagName.toUpperCase() !== "INPUT" 
            || options.element.type.toUpperCase() !== "CHECKBOX") {
            setValidationValues(options, "required", true);
        }
    });

依上述程式的註解看來,它似乎有意將CheckBox的required檢核交給mandatory規則處理,但程式其他地方卻又也沒提供mandatory檢核規則,於是CheckBox的必填檢核就變成了棄嬰。

爬文後,發現透過以下調整可以克服這個問題:

  1. 在載入jquery.validate.unobtrusive.js前執行$(function() {  $.validator.unobtrusive.adapters.addBool(“mandatory”, “required”); });
  2. 將data-val-required改寫為data-val-mandatory

如以下範例:

排版顯示純文字
<!DOCTYPE html>
 
<html>
<head>
    <title>CheckBox必勾檢核</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js" 
     type="text/javascript"> </script>   
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js" 
     type="text/javascript"> </script>   
    <script>
        $(function () {
            //REF: http://bit.ly/hySvLa
            $.validator.unobtrusive.adapters.addBool("mandatory", "required");
        });
    </script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" 
     type="text/javascript"> </script>   
    <link href="Content/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.validate.inline.js" type="text/javascript"> </script>
    <script type="text/javascript">
        $(function () {
//REF: http://blog.darkthread.net/post-2011-07-04-asp-net-mvc-inline-validation-chinese.aspx
            $("form").makeValidationInline();
        });
    </script>
</head>
<body style="padding: 50px; font-size: 9pt;">
<form id="form1" action="test.htm" method="get">
文字欄位: <input type="text" id="t1" name="t1" data-val="true" data-val-required="不可空白" />
<div style="margin-top: 10px;">
<textarea style="width: 260px; height: 50px;">
各人造業各人擔...各人造業各人擔...各人造業各人擔...各人造業各人擔...各人造業各人擔...各人造業各人擔...
</textarea>
<br />
<input type="checkbox" id="c1" name="c1" data-val="true" data-val-mandatory="請勾選已閱讀" />
<span>我已閱讀並接受"美股投公司服務條款及免責聲明"</span>
</div>
<input type="submit" value="送出" />
</form>
</body>
</html>

如此,就可以做到檢核CheckBox必須勾選的效果囉!


Comments

# by Robin

請問一下 "謙卑式jQuery" 這名稱由來是 ?

Post a comment