Customvalidation for html checkbox in asp.net

0
votes

How could I validate the html checkbox in asp.net?
I've tried the following. 

<input type="checkbox"  id="chk_rule" class="checkbox-custom" name="chk_rule"  runat="server"/>
<label for="bodycontent_chk_rule" class="checkbox-custom-label">I have read and agree to the official rules</label>
<asp:CustomValidator ID="Agreecheck" runat="server" Display="Dynamic" ForeColor="Red" ErrorMessage="You have to agree the rules." ControlToValidate="chk_rule" OnServerValidate="Agreecheck_ServerValidate"></asp:CustomValidator>

And the server-side validation function is following. 

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

But I've got the following error.

Message: Unable to find control id 'chk_rule' referenced by the 'ControlToValidate' property of 'Agreecheck'. Stack Trace: at System.Web.UI.WebControls.BaseValidator.CheckControlValidationProperty(String name, String propertyName) at System.Web.UI.WebControls.CustomValidator.ControlPropertiesValid() at System.Web.UI.WebControls.BaseValidator.OnPreRender(EventArgs e) at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

How could I fix this?

2
asp.netvalidation
Do you use a master page? – Farzin Kanzi
Please check link – Kuldip Rana
@FarzInKanz I use master page. – Andrew Li

2 Answers

0
votes

I tested your code, It works if you replace the checkbox with a Textbox. I think the custom validator is not for using for checkbox. So you can easily remove the problem by some jquery codes:

<script>
    $('input[type=submit]').click(function ()
    {
        var clientId = '<%= chk_rule.ClientID %>';
        if (!$('#' + clientId).is(':checked'))
        {
            alert('You must agree the rules');
            return false;
        }
    });
</script>

Here is a code snippet (only for see), you need the above code for your app

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox"  id="chk_rule" class="checkbox-custom" name="chk_rule"  runat="server"/>
<label for="bodycontent_chk_rule" class="checkbox-custom-label">I have read and agree to the official rules</label>
<input type="submit" value="submit" id="btnSubmit">
<script>
        $('input[type=submit]').click(function ()
        {
            if (!$('#chk_rule').is(':checked'))
            {
                alert('You must agree the rules');
                return false;
            }
        });
</script>
0
votes

You can use a CustomValidator to see if the CheckBox is checked.

<asp:CheckBox ID="CheckBox1" runat="server" Text="Check me please" />

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Checkbox not checked" ClientValidationFunction="validateCheckBox"></asp:CustomValidator>

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

<script type="text/javascript">
    function validateCheckBox(sender, args) {
        args.IsValid = document.getElementById("<%=CheckBox1.ClientID %>").checked;
    }
</script>