Ramani Sandeep's Blog

DotNetting – Fast , Easy Way of Developing Applications

CheckBoxList validation using JQuery

Posted by Ramani Sandeep on February 10, 2010


Every ASP.NET developer needs validation on CheckBoxList that can be one of these two:

  1. Check for RequiredField
  2. Check for Maximum Selection Limit

Check for RequiredField

I will be using JQuery to interecept the click event of each single Checkbox inside the CheckBoxList and then update a hidden TextBox control which has a RequiredFieldValidator associated to it, when a CheckBox is clicked.

When all CheckBoxes were unselected, the hidden TextBox would have nothing in it which makes the RequiredFieldValidator throws a JavaScript message on Submit.

Listing – 1 : CheckBoxList

 <asp:CheckBoxList ID="cblBusinessType" runat="server" CssClass="checkbox" ValidationGroup="VGEdit">
 </asp:CheckBoxList>

 <asp:Label ID="Label12" runat="server" Text="Select up to 3 Business Types" CssClass="label_black"></asp:Label>
 <asp:TextBox ID="txtCheckbox" runat="server" ValidationGroup="testGroup" style='display: none;'/>

<asp:RequiredFieldValidator ID="valCheckboxList" Display="Dynamic"
           ErrorMessage="At least one business type must be selected"
           runat="server" ControlToValidate="txtCheckbox"
           ValidationGroup="VGEdit" EnableClientScript="true" CssClass="ErrorLabel_10"
           SetFocusOnError="true"/>

Listing – 2 : jQuery Script for RequiredFieldValidator

  <script type="text/javascript">
        $(function() {
            function checkBoxClicked() {
                //Get the total of selected CheckBoxes
                var n1 = $("#<%= cblBusinessType.ClientID %> input:checked").length;
                //Set the value of the txtCheckbox control
                $("input:#<%= txtCheckbox.ClientID %>").val(n1 == 0 ? "" : n1);
            }
            //intercept any check box click event inside the #list Div
            $("#<%= cblBusinessType.ClientID %> :checkbox").click(checkBoxClicked);

        });
    </script>

Check for Maximum Selection Limit

We also often need to check that user can select only n items from the checkboxlist. so for that I have anothe jQuery script that help the developer to restrict the user from selection after he reach the max limit.

Listing – 3 : jQuery Script for Maximum Selection Limit

 <script type="text/javascript" language="javascript">
         //Count the Total Selection in CheckBoxList - BusinessType
         $('#<%= cblBusinessType.ClientID %>').find('input:checkbox').click(function()
         {
              var totCount=0;

              jQuery('#<%= cblBusinessType.ClientID %>').find("input:checkbox").each(function() {

              if (jQuery(this).attr("checked"))
              {
                totCount++;
              }

            });
            if(totCount > 3)
            {
                alert("Select up to 3 Business Types only...");
                return false;
            }

            return true;

         });
 </script>

Here in this function I have counted each selected checkbox by using jQuery selector each time user check/uncheck the checkbox. once the count goes beyond the limit flag the error message to user to remind that you have crossed the limit.

Hope this will Help
Jay Ganesh

Shout it kick it on DotNetKicks.com

About these ads

4 Responses to “CheckBoxList validation using JQuery”

  1. Teisha Shirley said

    Its really nice, showing maturity in your response. I have just got interested in blogging and hopefully i am able to do so.

  2. Shashank said

    Hello I am new to jQuery.
    Could you explain in simple lines how this works……

    Article: jQuery Script for Maximum Selection Limit

    • Ramani Sandeep said

      Hi Shashank , I have already explained each things in the article & i dont thing more explaination needed on this. but still you can read more on jQuery Learning & other articles on my blog if you are new to jQuery. That will improve yr knowledge. Still u feel that u r not getting any thing than let me know abt that topic we will dicuss it..

      Thanks
      Ramani Sandeep

  3. asp.net, c#,javascript…

    […]CheckBoxList validation using JQuery « Ramani Sandeep's Blog[…]…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 480 other followers

%d bloggers like this: