title: Validate asp:CheckBox control on client side using JavaScript and CustomValidator control
body: <p>I have two checkboxes. I need to check that at least one of them is checked before the form is submitted.</p>
  
  <p>I have a CustomValidator in place on the page. It calls a function for the server side validation. I need to add a function for client side validation.</p>
  
  <p>The client side function should be written in JavaScript.</p>
  
  <p>(I don't know if it makes a difference here, but there are also other user controls on the page, like textBoxes, which use other non-custom validators).</p>
  
  <p>This is the checkboxes and the custom validator control:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td colspan="3"&gt;
          &lt;asp:CheckBox id="EmailCourse" name="EmailCourse" runat="server" /&gt;
           Email course
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td colspan="3"&gt;
          &lt;asp:CheckBox name="SpecialReport" id="SpecialReport" runat="server" /&gt;
              Special report
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td colspan="3"&gt;
          &lt;asp:CustomValidator id="CustomValidator1" runat="server" ErrorMessage="No checkbox checked" CssClass="error" ClientValidationFunction="validateCheckboxes_ClientValidate" OnServerValidate="validateCheckBoxes_ServerValidate"&gt;&lt;/asp:CustomValidator&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>And this is the function called for the server side validation:</p>
  
  <pre><code>protected void validateCheckBoxes_ServerValidate(object source, ServerValidateEventArgs args)
      {
          if (!EmailCourse.Checked &amp;&amp; !SpecialReport.Checked)
              args.IsValid = false;
          else
              args.IsValid = true;
      }
  </code></pre>
  
  <p>I tried writing the client side function validateCheckboxes_ClientValidate:</p>
  
  <pre><code>    &lt;script type="text/javascript" language="javascript"&gt;
  
          function validateCheckboxes_ClientValidate(oSrc, args) {
              alert("inside function");
              var ec = document.getElementById("EmailCourse");
              var sr = document.getElementById("SpecialReport");
              if (!sr.checked &amp;&amp; !ec.checked) {
                  alert("hi it works");
                  args.IsValid = false;
              }
              else {
                  alert("one of them is checked");
                  args.IsValid = true;
              }
          }
  &lt;/script&gt; 
  </code></pre>
  
  <p>This doesn't work. The function is called, the first alert is displayed, but... that's it! The IF statement doesn't work.</p>
  
  <p>How come? What do I need to do to change this, so that the function actually validates the checkboxes and the form does not submit if invalid?</p>