Easily Validate ASP.NET CheckBoxLists With jQuery

The CheckBoxList control is very handy and easy to use.  Unfortunately when it comes to validating it, none of the built in ASP.NET validators can get the job done.  If you need to make sure the user has selected at least one of the checkboxes in the list, adding a RequiredFieldValidator will throw a runtime exception informing you that the CheckBoxList cannot be validated.

Most of the solutions found involved creating your own custom validator that inherited from BaseValidator.  I didn’t try any of them; I guess they work, but it just felt like too much work.  Thankfully there is a much simpler way.

jQuery is the Swiss Army knife of client side scripting.  The more I use it, the better I like it.  Here’s how to use jQuery to solve the same problem in less than 5 minutes.  Please note the code samples here have been modified from a DotNetNuke module I am currently writing.

First, let’s create our CheckBoxList and assign a class that we will use later in a jQuery selector:

   1: <asp:CheckBoxList id="cblEvents" runat="server" RepeatDirection="Horizontal" CssClass="CheckBoxList">

   2:   <asp:ListItem Text="Apples" Value="Apples"></asp:ListItem>

   3:   <asp:ListItem Text="Oranges" Value="Oranges"></asp:ListItem>

   4:   <asp:ListItem Text="Mangoes" Value="Mangoes"></asp:ListItem>

   5: </asp:CheckBoxList>

It would be nicer if we could assign the class directly to the ListItem, but we can’t.  The rendered markup of this control would be something like:

   1: <table id="dnn_ctr370_ViewModuleName_cblEvents" class="CheckBoxList" border="0">

   2:     <tr>

   3:         <td><input id="dnn_ctr370_ViewModuleName_cblEvents_0" type="checkbox" name="dnn$ctr370$ViewModuleName$cblEvents$0" />

   4:             <label for="dnn_ctr370_ViewModuleName_cblEvents_0">Apples</label></td>

   5:         <td><input id="dnn_ctr370_ViewModuleName_cblEvents_1" type="checkbox" name="dnn$ctr370$ViewModuleName$cblEvents$1" />

   6:             <label for="dnn_ctr370_ViewModuleName_cblEvents_1">Oranges</label></td>

   7:         <td><input id="dnn_ctr370_ViewModuleName_cblEvents_2" type="checkbox" name="dnn$ctr370$ViewModuleName$cblEvents$2" />

   8:             <label for="dnn_ctr370_ViewModuleName_cblEvents_2">Mangoes</label></td>

   9:     </tr>

  10: </table>

Notice how the CheckBoxList is actually rendered as a table and that its id has been altered, but the class name is intact.  ASP.NET renames child controls so they are unique.  This why we added the class to our CheckBoxList.  We are going to use the class in a jQuery selector to find the table, and then pull out all the child checkbox controls.

Next, create a CustomerValidator that we will use to call our custom client side jQuery validation function:

   1: <asp:CustomValidator id="cvEventsValidator" Display="Dynamic" ValidationGroup="Submit" runat="server"

   2:       ClientValidationFunction="ValidateCheckBoxList">&nbsp;required</asp:CustomValidator>

The final piece is to write our jQuery validation function.  Here it is:

   1: function ValidateCheckBoxList(sender, args) {

   2:     args.IsValid = false;

   3:

   4:     jQuery(".CheckBoxList").find(":checkbox").each(function() {

   5:         if (jQuery(this).attr("checked")) {

   6:             args.IsValid = true;

   7:             return;

   8:         }

   9:     });

  10: }

The selector above first finds all the elements with the class “CheckBoxList”, and within that matched set finds all the child elements of type “checkbox”, and for each of those checks to see if it is checked.  It returns true as soon as it finds a checkbox that has been checked.  I probably could have also used a selector like jQuery(“select[id$=cblEvents]”) for the same purpose (targeting controls whose id ends with cblEvents).

Tagged as: ASP.NET, DotNetNuke, jQuery, Validation