使用JavaScript和CustomValidator控件在客戶端驗證asp：CheckBox控件

Question

我有兩個復選框。 在提交表單之前，我需要檢查至少檢查了其中之一。

我在頁面上有一個CustomValidator。 它調用用於服務器端驗證的函數。 我需要添加一個用於客戶端驗證的功能。

客戶端功能應使用JavaScript編寫。

（我不知道這是否有區別，但是頁面上還有其他用戶控件，例如textBoxes，它們使用其他非自定義驗證器）。

這是復選框和自定義驗證程序控件：

<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>

這是用於服務器端驗證的功能：

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

我嘗試編寫客戶端功能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> 

這行不通。 調用該函數，顯示第一個警報，但是...就這樣！ IF語句不起作用。

怎么會？ 我需要做些什么來更改此設置，以使該函數實際驗證復選框，並且如果無效則不提交表單？

Answer 1

我嘗試了您的代碼，但DID只能在使用主頁面的頁面上正常工作。

可能存在兩種可能的問題，一種是母版頁下面列出的，已更改了最終生成的標識中的ID，如下所示，在這種情況下，您必須使用MainContent_EmailCourse作為JS中的ID

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

特別報告

或者可能是瀏覽器特定的問題。