Client-side Validation for CheckBox and CheckBoxList

Friday, October 12, 2007

Unfortunately, ASP.NET 2.0 did not provide any validation controls for validating the status of a CheckBox .  These controls are among the controls I use most often in several web applications.  Typical uses include when you need the user to choose at least x number of items in a CheckBoxList or a user needs to agree to some terms by checking that he or she read the agreement. 

This article by Scott Mitchell has a great overview of how to create such a validation control and the source is available at the end so you can start using it in your application immediately.


The usage is extermely simple.  For example, I needed to make sure that the user selected at least one checkbox before submitting a search.  Here’s the markup:


<skm:CheckBoxListValidator ID=”chklistVal” ValidationGroup=”search” ControlToValidate=”chkServices”
                        runat=”server” Display=”None” ErrorMessage=”Please select at least one service.” />

8 Comments

  1. Simon says:

    Thanks for taking the time to tell us about it.

  2. http:// says:

    I think this will help:

    function ValidateAnswerRadio()
    {
    var list = document.getElementById(‘< %=RadioButtons.ClientID %>‘).childNodes;

    for(i = 0; i < list.length; i++) if(list[i].type == "radio") if(list[i].checked) return true; return false; }

    Required.

    Cheers

  3. http:// says:

    Going to have to go with a Custom Validator instead of the skm if you wish to use the ajax Callout Extender as it will not extend the skm validators.

    – Bob

  4. http:// says:

    Actually I was able to get the skm validator to work with callouts but for some reason it stops working when changing views in a MultiView control. Trying to work it out.

  5. ziyad says:

    Here is the fully functional Validator for CheckboxList control for download…

    The components works perfect in both IE and FireFox.

    http://www.codeproject.com/KB/webforms/Validator_CheckBoxList.aspx

  6. http:// says:

    THanks for the code, it works great the first time. However, is there a way to validate the checkboxlist only if another checkbox in the same page equals to certain value? In another word, can condition validation be done? Thanks.

  7. http:// says:

    In response to Pedro’s comment, here’s a quick and dirty workaround that worked for me. The checkbox list was being placed in a table, so his javascript won’t work. Here’s the updated version. Mind you, you must still include the ClientValidationFunction property of the custom validator to this javascript function.

    function ValidateAnswerRadio(source, arguments) {
    var list = document.getElementById(‘< %=CheckBoxList.ClientID %>‘).rows;
    var counter = 0;
    for (i = 0; i < list.length; i++) { if (list[i].cells[0].childNodes[0].type == “checkbox”) { if (!list[i].cells[0].childNodes[0].checked) { counter++; } } } if (counter < list.length) arguments.IsValid = true; else arguments.IsValid = false; }

  8. http:// says:

    Hey Still got probelms i got your controls working fine in the updatepanel but the valtiongroup does not apearing to be working right they fire the first time with the submit button but not the second no i dont have it manually set to fales anywhere can you please update this contro l its great

Leave a Reply