ASP.NET 양식에 필요한 확인란을 만들려면 어떻게합니까?


112

나는 이것에 대해 약간의 검색을 해봤고, 나는 몇몇 부분적인 답을 찾았지만, 나에게 따뜻한 모호함을주는 것은 아무것도 없다. 이 질문에 대해 가장 자주 발생하는 불만 사항에 답하려면 "체크 박스에는 두 가지 합법적 인 상태 (선택 및 선택 취소)가있을 수 있습니다."는 등록을 완료하기 위해 선택해야하는 "약관에 동의합니다 ..."확인란입니다. 따라서 비즈니스 로직 관점에서 체크 박스를 선택해야합니다.

귀하의 응답과 함께 완전한 잘라 내기 및 붙여 넣기 준비 코드 조각을 제공하십시오! CustomValidator (아마도), 코드 숨김, 일부 자바 스크립트 및 IsValid 검사와 같은 몇 가지 부분이 있다는 것을 알고 있습니다. 저에게 실망스러운 부분은 제가 본 각 예제에서 이러한 중요한 요소 중 하나입니다. 조각이 없습니다!

답변:


216

클라이언트 측 유효성 검사를위한 자바 스크립트 함수 (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 속성에서 참조하는 Control <id-of-checkbox-control>을 확인할 수 없습니다."라는 예외가 발생합니다. 자바 스크립트 등을 중단합니다.
Bob Kaufman

2
아, 맞아. 그냥 제거하십시오-CheckBox는 올바른 인터페이스를 구현하지 않습니다. 유효성 검사기는 해당 속성을 설정하지 않아도 여전히 정상적으로 실행됩니다. 그에 따라 예제를 업데이트하겠습니다.
Scott Ivey

2
자바 스크립트 함수 이름의 CustomValidator 매개 변수는 'OnClientValidate'가 아니라 'ClientValidationFunction'이어야합니다. 참조 : msdn.microsoft.com/en-us/library/9eee01cx(v=VS.100).aspx
Chris

1
영향을 주려는 요소를 더 명확하게 지정 하는 jQuery("#<%= MyCheckBox.ClientID %>")대신 사용 하는 것이 좋습니다 jQuery(".AcceptedAgreement input:checkbox").
Jesse Webb

3
처음에는 ControlToValidate 특성이 없다는 것을 알지 못했습니다. 이 속성을 포함하면 예외가 발생하므로이를 놓칠 수있는 다른 사용자에게 경고를 보냅니다.
MicrosoftAccessPros.com

19

Andrew의 답변의 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 # 버전에 감사드립니다. 코드 최소화도 잘 사용합니다.
andrewWinn

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에서 작동하는 유일한 대답입니다. 만세!
haliphax

대단히 감사합니다. 동적으로 렌더링 된 여러 컨트롤을 사용하여이 작업을 수행하는 방법이 필요했습니다. 대박.
schmosef

Scott에서 선택한 솔루션이 정확하고 유효하지만 이것이 더 완벽한 솔루션이라고 생각합니다. 이 사용자 지정 컨트롤은 프레임 워크에 적용되어야합니다. 감사합니다 CirrusABS!
Gabe

5

Scott의 대답은 확인란 클래스에 적용됩니다. 개별 체크 박스를 원한다면 조금 더 은밀하게해야합니다. 하나의 상자 만하는 경우 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>       

Postback이 아닌 최고의 솔루션 중 하나입니다.
nu everest

이것의 문제점은 제출하면 유효성 검사기 메시지가 사라지지 않고 확인란을 선택하십시오.
MC9000

-1

비 자바 스크립트 방식. . 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
체크 박스에 유효성 검사기를 첨부 할 수 없기 때문에 작동하지 않습니다! 두오!
0xDEAD BEEF
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.