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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11101948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 12:06:03  来源:igfitidea点击:

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

javascriptasp.netcheckboxcustomvalidatorclient-side-validation

提问by code2b

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.

我在页面上有一个 CustomValidator。它调用一个用于服务器端验证的函数。我需要为客户端验证添加一个函数。

The client side function should be written in JavaScript.

客户端函数应该用 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).

(我不知道这里是否有所不同,但页面上还有其他用户控件,例如使用其他非自定义验证器的 textBoxes)。

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:

我尝试编写客户端函数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.

这不起作用。调用该函数,显示第一个警报,但是......就是这样!IF 语句不起作用。

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?

怎么来的?我需要做些什么来改变这一点,以便函数实际验证复选框并且表单在无效时不提交?

采纳答案by Guru Kara

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_EmailCourseas id in your JS

可能有两个可能的问题,一个是下面列出的母版页更改了生成的最终标记中的 ID,如下所示,在这种情况下,您必须MainContent_EmailCourse在 JS 中使用as id

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

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