如何在ASP.NET表单上使复选框成为必需?


112

我已经对此进行了一些搜索,并且找到了一些部分答案,但是没有什么让我感到困惑:“这是执行此操作的正确方法”。要回答对此问题最常见的投诉:“复选框可以有两个合法状态-选中和未选中”,这是一个“我接受条款和条件...”复选框,必须选中该复选框才能完成注册,因此,从业务逻辑的角度来看,需要选中此框。

请在回复中提供完整的可剪切粘贴代码片段!我知道有很多内容-CustomValidator(大概),代码隐藏,一些JavaScript以及可能的IsValid检查,而令我感到沮丧的是,在我看到的每个示例中,这些关键之一件丢失!

Answers:


216

用于客户端验证的javascript函数(使用jQuery)...

function CheckBoxRequired_ClientValidate(sender, e)
{
    e.IsValid = jQuery(".AcceptedAgreement input:checkbox").is(':checked');
}

代码后方用于服务器端验证...

protected void CheckBoxRequired_ServerValidate(object sender, ServerValidateEventArgs e)
{
    e.IsValid = MyCheckBox.Checked;
}

复选框和验证器的ASP.Net代码...

<asp:CheckBox runat="server" ID="MyCheckBox" CssClass="AcceptedAgreement" />
<asp:CustomValidator runat="server" ID="CheckBoxRequired" EnableClientScript="true"
    OnServerValidate="CheckBoxRequired_ServerValidate"
    ClientValidationFunction="CheckBoxRequired_ClientValidate">You must select this box to proceed.</asp:CustomValidator>

最后,在您的回发中-无论是通过按钮还是其他方式...

if (Page.IsValid)
{
    // your code here...
}

我可能做错了。我将继续进行最后的研究,但是ControlToValidate =“ <id-of-checkbox-control>”会引发异常“无法验证ControlToValidate属性引用的控件<id-of-checkbox-control>”。打破了JavaScript等
鲍勃·考夫曼

2
嗯,对。只需删除该内容-CheckBox不会实现将其绑定的正确接口。没有设置该属性,验证器仍可以正常运行。我将相应地更新我的示例。
Scott Ivey

2
javascript函数名称的CustomValidator参数应为“ ClientValidationFunction”,而不是“ OnClientValidate”。请参阅:msdn.microsoft.com/en-us/library/9eee01cx(v=VS.100).aspx
克里斯(Chris)2010年

1
我建议使用jQuery("#<%= MyCheckBox.ClientID %>")而不是jQuery(".AcceptedAgreement input:checkbox")更明确地说明要影响的元素。
杰西·韦伯

3
我最初没有注意到没有ControlToValidate属性。包含此属性会导致异常,因此请对可能也会错过该警告的其他人发出警告。
MicrosoftAccessPros.com

19

C#版本的安德鲁的答案:

<asp:CustomValidator ID="CustomValidator1" runat="server" 
        ErrorMessage="Please accept the terms..." 
        onservervalidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
    <asp:CheckBox ID="CheckBox1" runat="server" />

后台代码:

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
    args.IsValid = CheckBox1.Checked;
}

感谢您的C#版本。也很好地使用了使代码最小化的方法。
andrewWin

13

如果您想要一个不依赖jquery并同时处理服务器端验证的真正验证器(并且应该,服务器端验证是最重要的部分),那么这里是一个控件

public class RequiredCheckBoxValidator : System.Web.UI.WebControls.BaseValidator
{
    private System.Web.UI.WebControls.CheckBox _ctrlToValidate = null;
    protected System.Web.UI.WebControls.CheckBox CheckBoxToValidate
    {
        get
        {
            if (_ctrlToValidate == null)
                _ctrlToValidate = FindControl(this.ControlToValidate) as System.Web.UI.WebControls.CheckBox;

            return _ctrlToValidate;
        }
    }

    protected override bool ControlPropertiesValid()
    {
        if (this.ControlToValidate.Length == 0)
            throw new System.Web.HttpException(string.Format("The ControlToValidate property of '{0}' is required.", this.ID));

        if (this.CheckBoxToValidate == null)
            throw new System.Web.HttpException(string.Format("This control can only validate CheckBox."));

        return true;
    }

    protected override bool EvaluateIsValid()
    {
        return CheckBoxToValidate.Checked;
    }

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);

        if (this.Visible && this.Enabled)
        {
            System.Web.UI.ClientScriptManager cs = this.Page.ClientScript;
            if (this.DetermineRenderUplevel() && this.EnableClientScript)
            {
                cs.RegisterExpandoAttribute(this.ClientID, "evaluationfunction", "cb_verify", false);
            }
            if (!this.Page.ClientScript.IsClientScriptBlockRegistered(this.GetType().FullName))
            {
                cs.RegisterClientScriptBlock(this.GetType(), this.GetType().FullName, GetClientSideScript());
            } 
        }
    }

    private string GetClientSideScript()
    {
        return @"<script language=""javascript"">function cb_verify(sender) {var cntrl = document.getElementById(sender.controltovalidate);return cntrl.checked;}</script>";
    }
}

这是唯一可以在表单中的多个CheckBox上使用的答案,而不是每个对象需要1个函数。晕!
haliphax 2015年

非常感谢你。我需要一种方法来使用多个动态呈现的控件。太棒了
schmosef

尽管从Scott选择的解决方案是正确/有效,但我认为这是更完整的解决方案。该自定义控件应该已经加入到框架中。谢谢CirrusABS!
加布

5

斯科特的答案适用于复选框类别。如果您想要单独的复选框,则必须稍稍运动一些。如果您只是在做一个盒子,最好使用ID。本示例通过特定的复选框来实现,并且不需要jQuery。这也是如何将那些讨厌的控件ID放入Javascript的很好的小例子。

.ascx:

<script type="text/javascript">

    function checkAgreement(source, args)
    {                
        var elem = document.getElementById('<%= chkAgree.ClientID %>');
        if (elem.checked)
        {
            args.IsValid = true;
        }
        else
        {        
            args.IsValid = false;
        }
    }

    function checkAge(source, args)
    {
        var elem = document.getElementById('<%= chkAge.ClientID %>');
        if (elem.checked)
        {
            args.IsValid = true;
        }
        else
        {
            args.IsValid = false;
        }    
    }

</script>

<asp:CheckBox ID="chkAgree" runat="server" />
<asp:Label AssociatedControlID="chkAgree" runat="server">I agree to the</asp:Label>
<asp:HyperLink ID="lnkTerms" runat="server">Terms & Conditions</asp:HyperLink>
<asp:Label AssociatedControlID="chkAgree" runat="server">.</asp:Label>
<br />

<asp:CustomValidator ID="chkAgreeValidator" runat="server" Display="Dynamic"
    ClientValidationFunction="checkAgreement">
    You must agree to the terms and conditions.
    </asp:CustomValidator>

<asp:CheckBox ID="chkAge" runat="server" />
<asp:Label AssociatedControlID="chkAge" runat="server">I certify that I am at least 18 years of age.</asp:Label>        
<asp:CustomValidator ID="chkAgeValidator" runat="server" Display="Dynamic"
    ClientValidationFunction="checkAge">
    You must be 18 years or older to continue.
    </asp:CustomValidator>

和背后的代码:

Protected Sub chkAgreeValidator_ServerValidate(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ServerValidateEventArgs) _
Handles chkAgreeValidator.ServerValidate
    e.IsValid = chkAgree.Checked
End Sub

Protected Sub chkAgeValidator_ServerValidate(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ServerValidateEventArgs) _
Handles chkAgeValidator.ServerValidate
    e.IsValid = chkAge.Checked
End Sub

3

我通常在客户端执行验证:

<asp:checkbox id="chkTerms" text=" I agree to the terms" ValidationGroup="vg" runat="Server"  />
<asp:CustomValidator id="vTerms"
                ClientValidationFunction="validateTerms" 
                ErrorMessage="<br/>Terms and Conditions are required." 
                ForeColor="Red"
                Display="Static"
                EnableClientScript="true"
                ValidationGroup="vg"
                runat="server"/>

<asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" CausesValidation="true" Text="Submit" ValidationGroup="vg" runat="server" />

<script>
    function validateTerms(source, arguments) {
        var $c = $('#<%= chkTerms.ClientID %>');
        if($c.prop("checked")){
            arguments.IsValid = true;
        } else {
            arguments.IsValid = false;
        }
    }
</script>       

最好的解决方案之一,因为它不回发。
nu珠穆朗玛峰,2015年

问题在于,如果您提交验证程序消息,该消息不会消失,然后尝试选中该复选框。
MC9000 '18

-1

非JavaScript方式。。aspx页面:

 <form id="form1" runat="server">
<div>
    <asp:CheckBox ID="CheckBox1" runat="server" />
    <asp:CustomValidator ID="CustomValidator1"
        runat="server" ErrorMessage="CustomValidator" ControlToValidate="CheckBox1"></asp:CustomValidator>
</div>
</form>

背后的代码:

Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate
    If Not CheckBox1.Checked Then
        args.IsValid = False
    End If
End Sub

对于您可能需要的任何操作(业务规则):

If Page.IsValid Then
   'do logic
End If 

对不起,VB代码。。。您可以将它转换为C#。我现在工作的公司需要VB :(


3
由于您无法将验证器附加到复选框,因此无法使用!OO!
0xDEAD BEEF,2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.