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!

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

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

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>";
    }
}

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

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>       

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


3
Dies funktioniert nicht, da Sie keinen Validator an das Kontrollkästchen anhängen können! DOOOH!
0xDEAD BEEF
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.