Velocity Reviews - Checkboxlist - validation

Hi

You can use simple javascript to validate a check box list follows:

I have written two javascript functions for this:-

1) ValidateEducations() : This function finds the checkboxlist control in the client side and iterates through all the listitems of the checkboxlist. It takes up every listitem (which is actually a checkbox) one by one and finds whether it is checked or not. The moment it finds a checked checkbox it returns true indicating that the checkboxlist is validated. If none of the listitems(child checkboxes) are found checked and the for loop (enumerating through the listitems) ends, it returns false indicates that checkboxlist validation failed.

2) ShowHidevalidationError(): This function just does the job of showing/hiding validation error.

/******************************/
<script type="text/javascript" language="javascript">
function ValidateEducations() {
var chkEducations = document.getElementById('<%= chkEducations.ClientID %>');
if(chkEducations) {
var chkEducationsItemList = chkEducations.getElementsByTagName('input');
if(chkEducationsItemList) {
if(chkEducationsItemList.length > 0) {
for(var i = 0 ; i < chkEducationsItemList.length; i++) {
var chkEducationsItem = chkEducationsItemList[i];
if(chkEducationsItem) {
if(chkEducationsItem.type == 'checkbox') {
if(chkEducationsItem.checked) {
return ShowHideValidationError(false);
}
}
}
}
}
}
}
return ShowHideValidationError(true);
}

function ShowHideValidationError(show) {
var lblEducationsValidationError = document.getElementById('<%= lblEducationsValidationError.ClientID %>');
if(lblEducationsValidationError) {
if(show) {
lblEducationsValidationError.style.display = 'block';
return false;
} else {
lblEducationsValidationError.style.display = 'none';
return true;
}
}
}
</script>
/******************************/

And here goes the related HTML markup:
/************************************************** ********/
<table>
<tr>
<td>
<div>
<asp:Label ID="lblEducation" runat="server" Text="Education" />
</div>
<div>
<asp:Label ID="lblHint" runat="server" Text="(Please select all qualificatins you have acquired)"
Font-Size="8" ForeColor="GrayText" />
</div>
</td>
<td>
<asp:CheckBoxList ID="chkEducations" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow"
TextAlign="Right" onclick="ValidateEducations()">
<asp:ListItem Text="Primary School" Value="1" />
<asp:ListItem Text="High School" Value="2" />
<asp:ListItem Text="Junior College" Value="3" />
<asp:ListItem Text="Graduate" Value="4" />
<asp:ListItem Text="Post Graduate" Value="5" />
<asp:ListItem Text="Phd" Value="6" />
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblEducationsValidationError" runat="server" Font-Bold="true" ForeColor="Red"
Text="Please select at least one educational qualification." Style="display:none" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnSubmitForm" runat="server" Text="Submit" OnClientClick="return ValidateEducations()"
OnClick="btnSubmitForm_Clicked" />
</td>
</tr>
</table>
/************************************************** ********/

Description:
The checkbox list control renders as an HTML table if the RepeatLayout property is set as "table" and renders as HTML <span> if the RepeatLayout property is set as ""Flow".
In both he cases the client side javascript event onclick works. Hence the moment you check/uncheck a checkbox the validation functions will be called and the checkboxlist will be validated on the client side itself.

How do we validate?

Whether the checkboxlist renders into <span> or <table> it is definitely going to contain a collection of child HTML elements i.e. <input> tags with their type set to "checkbox" each.

This collection is retrieved by calling the method getElementsByTagName('input') on the instance of the checkboxlist control.

We then iterate through all the elements in this collection and for each element (checkbox) we assess the checked status. If checkbox is checked we return immediately because validation has succeeded. If we are, however, done iterating through all the elements (checkboxes) and still found none as checked then we display the validation failed message.

Thank you
Ankur