<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
html,body { font-size:10pt; }
.checkBoxGroup { width:150px; margin:6px 0 0 0; padding:5px; border:1px solid #999999; }
.checkBoxGroup h3 { margin:0; }
p.errMsg { margin:0 0 9px 0; color:red; }
</style>
<script type="text/javascript">
check = function( form, chBoxGroups ) {
result = true;
if (chBoxGroups){ result = chBoxGroupValidator.scanGroups(chBoxGroups) && result; }
//result = foo1() && result; //Do other checks here as necessary.
//result = foo2() && result; //Do other checks here as necessary.
//result = foo3() && result; //Do other checks here as necessary.
return result;
}
var chBoxGroupValidator = function(){
var setMsg = function(group, msg){
var msgID = group.getAttribute('msgID');
if(!msgID) { return false; }
var msgEl = (document.getElementById) ? document.getElementById(msgID) : document.all[msgID];
if(!msgEl) { return false; }
msgEl.innerHTML = msg;
return true;
};
var validateGroup = function(groupID){
if (!groupID || typeof groupID != 'string') { return true; };//Invalid groupID - assume good.
var qualifiers = false;
var group = (document.getElementById) ? document.getElementById(groupID) : document.all[groupID];
if(!group) { return true; }//group not found - assume good.
var inputElements = group.getElementsByTagName('INPUT');
for(var i=0; i<inputElements.length; i++) {
if(inputElements[i].getAttribute('type') == 'checkbox') {
qualifiers = true;
if(inputElements[i].checked) {
setMsg(group, ' ');
return true;
}
}
}
if(qualifiers) {
if( !setMsg(group, 'Select at least one item in this group') ) {
var groupName = group.getAttribute('name');
alert( ['You must select at least one item in the group : ', ((!groupName) ? '' : groupName)].join('') );
}
return false;
}
return true;
};
return {
scanGroups : function(chBoxGroups){
if (!chBoxGroups) { return true; }
var result = true;
if(typeof chBoxGroups == 'string') { chBoxGroups = [chBoxGroups]; }
if(chBoxGroups.length) {
for(var i=0; i<chBoxGroups.length; i++) { result = validateGroup(chBoxGroups[i]) && result; }
}
return result;
}
};
}();
</script>
</head>
<body>
<form id="frm" action="#" onsubmit="return check( this, ['group_1', 'group_2'] );">
<div id="group_1" name="Group 1" msgID="msg_1" class="checkBoxGroup">
<h3>Group 1</h3>
<label for="ch1_1">Check Field 1_1: <input type="checkbox" id="ch1_1" name="ch1_1" value="CheckBox 1_1"></label><br>
<label for="ch1_2">Check Field 1_2: <input type="checkbox" id="ch1_2" name="ch1_2" value="CheckBoX 1_2"></label><br>
</div>
<p id="msg_1" class="errMsg"> </p>
<div id="group_2" name="Group 2" msgID="msg_2" class="checkBoxGroup">
<h3>Group 2</h3>
<label for="ch2_1">Check Field 2_1: <input type="checkbox" id="ch2_1" name="ch2_1" value="CheckBox 2_1"></label><br>
<label for="ch2_2">Check Field 2_2: <input type="checkbox" id="ch2_2" name="ch2_2" value="CheckBoX 2_2"></label><br>
<label for="ch2_3">Check Field 2_3: <input type="checkbox" id="ch2_3" name="ch2_3" value="CheckBoX 2_3"></label><br>
</div>
<p id="msg_2" class="errMsg"> </p>
<input type="submit" value="submit" id="sbm" name="sbm2">
</form>
</body>
</html>
Unsolved 
Offline 
