<!DOCTYPE html>
<html>
<head>
<title>Multiple-Selection Field Validation Example</title>
<script src="Scripts/jquery-1.6.3.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>
$(function () {
//透過Unobtrusive方式將隱藏欄位能自動取得Checkbox的勾選結果
//實務上這段Script可提取成獨立JS檔，方便重複利用
//找出有設data-multi-sel-cbx-selector的欄位
$("input[data-multi-sel-cbx-selector]").each(function () {
var $input = $(this);
//若有data-multi-sel-sep-char，就使用自訂的分隔字元,
//未指定定時，預設使用"|"分隔
var sepChar = $input.data("multiSelSepChar") || "|";
//由data-multi-sel-cbx-selector取出jQuery selector
//找到其關聯的Checkbox進行雙向繫結
var $cbxes = $($input.data("multiSelCbxSelector"));
//在每一個關聯Checkbox上加掛Click事件
$cbxes.click(function () {
//將所有勾選的值串成單一字串
var ary = [];
$cbxes.filter(":checked").each(function () {
ary.push(this.value);
});
//將合併的單一字串設為隱藏欄位的值
//並呼叫"focusout"事件立即觸發檢核
$input.val(ary.join(sepChar)).focusout();
});
//另外宣告一個mapValue事件，用來將隱藏欄位內容反應成Checkbox勾選狀態
$input.bind("mapValue", function () {
var ary = this.value.split(sepChar);
$cbxes.each(function () {
//由Checkbox value是否在其中決定checked
this.checked = $.inArray(this.value, ary) != -1;
});
});
});
});
</script>
<script>
//自訂檢核邏輯，以|分隔字元拆解出複選值陣列
//由陣列數目限定複選數量不可超過3個
jQuery.validator.addMethod("multiSelectChk",
function (value, elem, params) {
var count = value.split('|').length;
if (count > 3) return false;
return true;
}, '');
jQuery.validator.unobtrusive.adapters.add(
"multiSelect", [],
function (options) {
options.rules["multiSelectChk"] = true;
options.messages['multiSelectChk'] = options.message;
});
$(function () {
$("#form1").makeValidationInline();
});
</script>
<style>
body,table,input { font-size: 9pt; }
td { border: 1px solid gray; padding: 5px; }
#ulGadgets
{
list-style-type: none; margin: 0px;
padding: 0px;
}
#ulGadgets li { float: left; }
</style>
</head>
<body>
<form id="form1" method="get" action="MultSelFieldValidation.htm">
<table style="margin-top: 50px;">
<tr>
<td style="width: 150px; text-align: right; vertical-align: top;">
Frequently Used Gadgets</td>
<td style="width: 400px">
<input type="text" id="txtGadgets" name="txtGadgets"
style="visibility: hidden; position: absolute; width: 0px;"
data-val="true" data-val-required="Please choose at least one option"
data-val-multiSelect="You cannot choose more than 3 options"
data-multi-sel-cbx-selector="#ulGadgets :checkbox"
/>
<ul id="ulGadgets">
<li><input type="checkbox" value="Watch" />Watch</li>
<li><input type="checkbox" value="MP3Player" />MP3 Player</li>
<li><input type="checkbox" value="FlashDrive" />USB Flash Drive</li>
<li><input type="checkbox" value="MobiePhone" />Mobile Phone</li>
<li><input type="checkbox" value="PDA" />PDA</li>
<li><input type="checkbox" value="GPS" />GPS</li>
<li><input type="checkbox" value="Tablet" />Tablet or Slate PC</li>
</ul>
<div style="clear: both; margin: 5px; color: Gray;">
(Multiple selection,
please select at least one, but not more than three)</div>
</td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
</body>
</html>