Validate asp:CheckBox control on client side using JavaScript and CustomValidator control

Question

I have two checkboxes. I need to check that at least one of them is checked before the form is submitted.

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.

The client side function should be written in JavaScript.

(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).

This is the checkboxes and the custom validator control:

<tr>
    <td colspan="3">
        <asp:CheckBox id="EmailCourse" name="EmailCourse" runat="server" />
         Email course
    </td>
</tr>
<tr>
    <td colspan="3">
        <asp:CheckBox name="SpecialReport" id="SpecialReport" runat="server" />
            Special report
    </td>
</tr>
<tr>
    <td colspan="3">
        <asp:CustomValidator id="CustomValidator1" runat="server" ErrorMessage="No checkbox checked" CssClass="error" ClientValidationFunction="validateCheckboxes_ClientValidate" OnServerValidate="validateCheckBoxes_ServerValidate"></asp:CustomValidator>
    </td>
</tr>

And this is the function called for the server side validation:

protected void validateCheckBoxes_ServerValidate(object source, ServerValidateEventArgs args)
    {
        if (!EmailCourse.Checked && !SpecialReport.Checked)
            args.IsValid = false;
        else
            args.IsValid = true;
    }

I tried writing the client side function validateCheckboxes_ClientValidate:

    <script type="text/javascript" language="javascript">

        function validateCheckboxes_ClientValidate(oSrc, args) {
            alert("inside function");
            var ec = document.getElementById("EmailCourse");
            var sr = document.getElementById("SpecialReport");
            if (!sr.checked && !ec.checked) {
                alert("hi it works");
                args.IsValid = false;
            }
            else {
                alert("one of them is checked");
                args.IsValid = true;
            }
        }
</script> 

This doesn't work. The function is called, the first alert is displayed, but... that's it! The IF statement doesn't work.

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?

Answer 1

I tried your code and it DID just work fine in a page which dosent use master page.

There could be two possible issue one is as listed below the master page has altered the ID in the final markup generated like below, in this case you have to use MainContent_EmailCourse as id in your JS

<td colspan="3">
    <span name="EmailCourse"><input id="MainContent_EmailCourse" type="checkbox" name="ctl00$MainContent$EmailCourse" /></span>
     Email course
</td>

Special report

Or it might be browser specific issue issue.