Client Validation (JavaScript) for CustomValidator Control RSS

• • Reply
  

  g5temp

  Member

  200 Points

  41 Posts

  Client Validation (JavaScript) for CustomValidator Control

  Dec 16, 2005 02:44 PM|LINK

  Hi,
  We have an ASP.NET 2.0 (C#) application that has a web form with a CheckBoxList control and a CustomValidator control.  The CustomValidator control is used to validate that at least one checkbox is checked in the CheckBoxList control.

  Everything works fine for the server-side validation.  However, we're having difficulties with writing a JavaScript function to perform the same validation on the client-side.

  Here's what we got:

  <script type="text/javascript">
      function validateChecked(oSrc, args)
      {
          args.IsValid = false;

          var formToValidate = document.forms['aspnetForm'];

          if (!formToValidate)
          {
              formToValidate = document.aspnetForm;
          }

          var controlIndex;
          var numberOfControls = formToValidate.length;
          var element;

          for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++)
          {
              element = formToValidate[controlIndex];

              if (element.type == "checkbox")
              {
                  if (element.checked == true)
                  {
                      args.IsValid = true;
                  }
              }
          }
      }
  </script>

  With this code, everything seems to work fine.  The problem is that we have other checkboxes on the form that are not part of the CheckBoxList control, and this JavaScript code cannot distinguish between the checkboxes in the CheckBoxList control that we want to validate and the other checkboxes that we don't want to validate.

  Does anyone know how to write this JavaScript code to validate that at least one checkbox in our CheckBoxList control is checked, while ignoring any other checkboxes on the web form?

  Since ASP.NET assigns some funky IDs/Names when the CheckBoxList is rendered (e.g.,
  <input id="ctl00_ContentPlaceHolderMain_Daily1_CheckBoxListDaily_0" type="checkbox" name="ctl00$ContentPlaceHolderMain$Daily1$CheckBoxListDaily$0" /><label for="ctl00_ContentPlaceHolderMain_Daily1_CheckBoxListDaily_0">Sun</label>), how can you reference the correct controls by ID/Name?

  Is there a better way of doing this?

  Thanks!
  

   

  • Moved by tmorton on Dec 16, 2005 02:57 PM
• • Reply
  

  joteke

  All-Star

  46284 Points

  6896 Posts

  ASPInsiders

  MVP

  Re: Client Validation (JavaScript) for CustomValidator Control

  Dec 16, 2005 08:30 PM|LINK

  Hi,

  you can output the ClientID of the CheckBoxList to your script (with <%=%>) and also the count of items in the CBL (with Items.Count). You are on right track that you can get that done with the IDs (yes, ASP.NET can give you the client-side ID via ClientID property of the control)

  So you know what there are items with IDs

  [cbl_clientid]_0
  [cbl_clientid]_1
  ...
  ...
  [cbl_clientid]_[itemcount -1]

  So assuming you'd had CBL for example like this:

   <asp:CheckBoxList ID="CheckBoxList1" runat="server">
              <asp:ListItem>Item 1</asp:ListItem>
              <asp:ListItem>Item 2</asp:ListItem>
              <asp:ListItem>Item 3</asp:ListItem>
          </asp:CheckBoxList>

  You could have validation script as follows to use with CustomValidator

  <script type="text/javascript" >
              function validateCBL(src,args)
              {
                  var retVal=false;
                  var cnt=<%=CheckBoxList1.Items.Count%>;
                  var cblid='<%=CheckBoxList1.ClientID%>';
                 
                  for(i=0;i<cnt;i++)
                  {
                      if(document.getElementById(cblid + '_' + i).checked)
                      {
                          retVal=true;
                          break;
                      }
                  }
                  args.IsValid=retVal;
              }
          </script>

  Note that I output the relevant information from server-side to client-side by placing <%=%>'s to the client-side script. Those are executed when page renders so they won't contradict with your server-side processing of the control(s) on the page.

  And note that you also need to implement the server-side validation as well, though that is easy task.

  Thanks,
  
  Teemu Keiski
  Finland, EU
  
  • Edited by joteke on Dec 16, 2005 08:31 PM
  • Edited by joteke on Dec 16, 2005 08:34 PM
  • Edited by joteke on Dec 16, 2005 08:34 PM
  • Marked as answer by joteke on Sep 13, 2007 07:12 PM