<!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 () {
//Binding checkboxes to multiple seletion field in unobtrusive way.
//This script section can be saved as separate js file for reuse
//Use data-multi-sel-cbx-selector attribute to set binding
$("input[data-multi-sel-cbx-selector]").each(function () {
var $input = $(this);
//Get separate char from data-multi-sel-sep-char attribute,
//if not set, use "|" as default
var sepChar = $input.data("multiSelSepChar") || "|";
//Use data-multi-sel-cbx-selector as jQuery selector
//to find checkboxes for two-way binding
var $cbxes = $($input.data("multiSelCbxSelector"));
//Attach a click event to each checkbox
$cbxes.click(function () {
//Join all checked values as a string
var ary = [];
$cbxes.filter(":checked").each(function () {
ary.push(this.value);
});
//Set the result string to the target input
//and fire "focusout" event to trigger validation
$input.val(ary.join(sepChar)).focusout();
});
//A new event to map $input's value to checkboxes
$input.bind("mapValue", function () {
var ary = this.value.split(sepChar);
$cbxes.each(function () {
//If the checkbox's value is in array, check it
this.checked = $.inArray(this.value, ary) != -1;
});
});
});
});
</script>
<script>
//Custom validation rule, parse value as | separated value
//and make sure the array elements count not more than than 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>