Wie mache ich ein Kontrollkästchen in einem ASP.NET-Formular erforderlich?

112

Ich habe einige Nachforschungen angestellt und einige Teilantworten gefunden, aber nichts, was mich so warm und verschwommen macht "das ist der richtige Weg, dies zu tun". Um die am häufigsten auftretende Beschwerde gegen diese Frage zu beantworten: "Kontrollkästchen können zwei legitime Zustände haben - aktiviert und deaktiviert". Dies ist ein Kontrollkästchen "Ich akzeptiere die Allgemeinen Geschäftsbedingungen ...", das aktiviert werden muss, um eine Registrierung abzuschließen. Daher ist das Aktivieren des Kontrollkästchens unter dem Gesichtspunkt der Geschäftslogik erforderlich.

Bitte geben Sie Ihre Antwort mit vollständigen Codefragmenten zum Ausschneiden und Einfügen an! Ich weiß, dass es mehrere Teile gibt - den CustomValidator (vermutlich), den Code-Behind, etwas Javascript und möglicherweise eine Überprüfung auf IsValid, und der frustrierende Teil für mich ist, dass in jedem Beispiel, das ich gesehen habe, einer dieser kritisch ist Teile fehlen!

Bob Kaufman
quelle

Antworten:

216

Javascript-Funktion zur clientseitigen Validierung (mit jQuery) ...

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

Code-Behind für die serverseitige Validierung ...

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

ASP.Net-Code für das Kontrollkästchen und den Validator ...

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

und schließlich in Ihrem Postback - ob von einem Knopf oder was auch immer ...

if (Page.IsValid)
{
    // your code here...
}
Scott Ivey
quelle
Ich mache wahrscheinlich etwas falsch. Ich werde an meinem Ende weiter nachforschen, aber ControlToValidate = "<id-of-checkbox-control>" löst eine Ausnahme aus. "Control <id-of-checkbox-control>, auf das durch die ControlToValidate-Eigenschaft verwiesen wird, kann nicht überprüft werden." Was das Javascript usw. bricht
Bob Kaufman
2
ahh, richtig. Entfernen Sie das einfach - CheckBox implementiert nicht die richtige Schnittstelle, um es zu binden. Der Validator läuft weiterhin ohne diese Eigenschaft. Ich werde mein Beispiel entsprechend aktualisieren.
Scott Ivey
2
Der CustomValidator-Parameter für den Namen der Javascript-Funktion sollte 'ClientValidationFunction' und nicht 'OnClientValidate' sein. Siehe: msdn.microsoft.com/en-us/library/9eee01cx(v=VS.100).aspx
Chris
1
Ich würde vorschlagen, zu verwenden, jQuery("#<%= MyCheckBox.ClientID %>")anstatt jQuery(".AcceptedAgreement input:checkbox")expliziter zu sein, auf welches Element Sie Einfluss nehmen möchten .
Jesse Webb
3
Ich habe anfangs nicht bemerkt, dass es kein ControlToValidate-Attribut gibt. Das Einschließen dieses Attributs führt zu einer Ausnahme, daher ein Warnwort für andere, die dies möglicherweise ebenfalls übersehen.
MicrosoftAccessPros.com
19

C # -Version von Andrews Antwort:

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

Code-Behind:

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
    args.IsValid = CheckBox1.Checked;
}
John Rasch
quelle
Danke für die C # Version. Gute Verwendung der Minimierung des Codes auch.
AndrewWinn
13

Wenn Sie einen echten Validator wünschen, der nicht auf jquery basiert und auch die serverseitige Validierung übernimmt (und Sie sollten dies tun. Die serverseitige Validierung ist der wichtigste Teil), dann ist hier ein Steuerelement

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>";
    }
}
CirrusABS
quelle
Dies ist die einzige Antwort, die für mehr als eine CheckBox in einem Formular funktioniert, anstatt 1 Funktion pro Objekt zu benötigen. Huzzah!
Haliphax
Vielen Dank. Ich brauchte eine Möglichkeit, dies mit mehreren dynamisch gerenderten Steuerelementen zu tun. Genial.
Schmosef
Obwohl die von Scott ausgewählte Lösung korrekt / gültig ist, glaube ich, dass dies die vollständigere Lösung ist. Dieses benutzerdefinierte Steuerelement sollte in das Framework integriert worden sein. Danke CirrusABS!
Gabe
5

Scotts Antwort funktioniert für Klassen von Kontrollkästchen. Wenn Sie einzelne Kontrollkästchen wünschen, müssen Sie etwas hinterhältiger sein. Wenn Sie nur eine Box machen, ist es besser, dies mit IDs zu tun. In diesem Beispiel werden bestimmte Kontrollkästchen verwendet, und es ist keine jQuery erforderlich. Es ist auch ein schönes kleines Beispiel dafür, wie Sie diese lästigen Steuerelement-IDs in Ihr Javascript aufnehmen können.

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

Und der Code dahinter:

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
Jorelli
quelle
3

Normalerweise führe ich die Validierung auf der Client-Seite durch:

<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>       
rauben
quelle
Eine der besten Lösungen, da es kein Postback gibt.
Nu Everest
Das Problem dabei ist, dass die Validierungsnachricht beim Senden nicht verschwindet. Aktivieren Sie dann das Kontrollkästchen.
MC9000
-1

Nicht-Javascript-Methode. . aspx Seite:

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

Code dahinter:

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

Für alle Aktionen, die Sie möglicherweise benötigen (Geschäftsregeln):

If Page.IsValid Then
   'do logic
End If 

Entschuldigung für den VB-Code. . . Sie können es in C # konvertieren, wenn es Ihnen Spaß macht. Die Firma, für die ich gerade arbeite, benötigt VB :(

andrewWinn
quelle
3
Dies funktioniert nicht, da Sie keinen Validator an das Kontrollkästchen anhängen können! DOOOH!
0xDEAD BEEF