CheckBoxList validation

Within our current project, we faced a requirement such that there are multiple checkboxes and the user is required to select any one of them (at least one of them). So as there are multiple checkboxes, decided to go with CheckBoxList control. Now the problem is that, we need to show a error message if the user is not selected any one of them. The problem also extends not just there, but the display text should be culture specific.

So the story started long after I've written this post. But editing this entire post due to a simple non supportive feature by IE. I’ll come to that point little later, let me first detail the requirement and solution. There is one more solution for this unsupported error. Please read thru the post.

For all the client side validations, it is widely known that validation controls supported by ASP.NET framework are popularly used. But these controls can’t handle the CheckBoxList. Hence the following solution.

Step 1: Place your CheckBoxList control in a separate div as shown below. Observe that the text for these controls are populated from database depending upon the user culture

<div id="cblItems1">
    <asp:CheckBoxList ID="cblOptions" runat="server">
        <asp:ListItem Text="<%$Resources:CommonFormFields, Repair%>"></asp:ListItem>
        <asp:ListItem Text="<%$Resources:CommonFormFields, Calibration%>"></asp:ListItem>
        <asp:ListItem Text="<%$Resources:CommonFormFields, RepairCalibration%>"></asp:ListItem>
        <asp:ListItem Text="<%$Resources:CommonFormFields, OnlineService%>"></asp:ListItem>
    </asp:CheckBoxList>
</div>

Step 2: Use ASP:Lable and get the error message while loading and place in a separate div and hide this div by default as mentioned below. Please note the div ID as cblError1 and the style is set to hidden by default

<div id="cblError1" style="visibility: hidden">
    <asp:Label ID="lblReq1" runat="server" Text="<%$Resources:CommonFormFields, SelectAny%>"></asp:Label>
    </div>

Step 3: Write a JScript function that reads all the client side rendered elements as input objects and checks whether any of them are checked or not. Code explains more in detail

function CheckListValidation(cblItm, errDiv)
{
    var tDiv = document.getElementById(cblItm);
    var chkitems = tDiv.childNodes[1];
    var chkitm = chkitems.getElementsByTagName("input");
    for (var i = 0; i < chkitm.length; i++) 
    {
        if (chkitm[i].checked) 
        {                    
                return true;
        }
    }
    document.getElementById(errDiv).style.visibility = 'visible';
    return false;
}

Step 4: Now it is the turn of invoking this function from the button click. Every button is having a method called as “OnClientClick” along with Click. Invoke this function from that method as mentioned below

<asp:Button ID="btnAddMore" runat="server" Text="Add More" 
OnClientClick="return CheckListValidation('cbOptions','cblError1');"
    OnClick="btnAddMore_Click" />

Step 5: All setup and the code is running fine. But there is a problem with this code while running in IE. IE 6 and above doesn’t support the getElementsByTag

var vTe = document.getElementsByTagName(..);

There is a long story for this. Let me post one more post for the better mechanism of CheckBoxList Validation. Until then, what are your comments??