使用JavaScript和CustomValidator控件在客户端验证asp:CheckBox控件

时间:2012-06-19 13:26:07

标签: javascript asp.net checkbox customvalidator client-side-validation

我有两个复选框。我需要检查在提交表单之前至少检查过其中一个。

我在页面上有一个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语句不起作用。

为什么?我需要做些什么来改变它,以便该函数实际验证复选框,如果无效,表单不会提交?

1 个答案:

答案 0 :(得分:0)

我尝试了你的代码并且它在一个使用母版页的页面中工作得很好。

可能有两个可能的问题,如下面列出的那样,母版页已经改变了生成的最终标记中的ID,如下所示,在这种情况下,你必须在JS中使用MainContent_EmailCourse作为id

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

                          特别报道     

或者它可能是特定于浏览器的问题。