Asp.net webform with checkbox validation not working

Question

I have a webform with 5-6 input fields with validation which was working fine & now i need to add checkboc for T&C and form should not submit unless T&C checkbox is check.

Below i part of my code for simplicity i have removed some input to keep it brief.

I am using OnClientClick="ClientSideClick(this)" function to check validation to disable submit button for multiple submission.

this form works & if i dont check checkbox validation but when i try to validate and if 'Page_ClientValidate' is true it never check the part of code for checkbox validation. I tried placing code in different place but it doent work. not what i am doing wrong

<asp:Label ID="lblFirstName" runat="server" CssClass="row-label" Text="First Name:"></asp:Label>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfFN" runat="server" ValidationGroup="VG" ErrorMessage="*"  ControlToValidate="txtFirstName" Display="Dynamic"></asp:RequiredFieldValidator>

<asp:Label ID="Label2" runat="server" CssClass="row-label" Text="Last Name:"></asp:Label>
<asp:TextBox ID="txtLastName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvtxtLastName" runat="server" ValidationGroup="VG" ErrorMessage="*" ControlToValidate="txtLastName" Display="Dynamic"></asp:RequiredFieldValidator>

<asp:Label ID="lblEmail" runat="server" CssClass="row-label" Text="E-mail:"></asp:Label>
<asp:TextBox ID="txtEmail" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ValidationGroup="VG" ErrorMessage="*"  ControlToValidate="txtEmail" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="*"  ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="VG" Display="Dynamic"></asp:RegularExpressionValidator>

<asp:CheckBox ID="chkIAgreeSub" runat="server"  /> I agree to Terms & condition

<asp:Button ID="btnSave" runat="server" CssClass="btn btn-submit" Text="Submit" OnClick="btnSave_Click" OnClientClick="ClientSideClick(this)" UseSubmitBehavior="False" ValidationGroup="VG" />

<script type="text/javascript">
        //Avoid Multiple Submission
        function ClientSideClick(myButton) {
            // Client side validation
            if (typeof (Page_ClientValidate) == 'function') {

               if (Page_ClientValidate() == false)
               {
                  console.log("VALIDATION FALSE");
                  return false;
               }
               else
               {
               console.log("VALIDATION TRUE");
                    if (document.getElementById("<%=chkboxTC.ClientID %>").checked == true) {
                        console.log("T&C  checked TRUE");
                        return true;
                    } else {
                        console.log("T&C NOT  checked FALSE");
                        return false;
                    }
               }


            }

            if (myButton.getAttribute('type') == 'button') {
                // diable the button
                myButton.disabled = true;
                myButton.value = "Processing...";
            }
            return true;

        }

 </script>

naveen · Answer 1 · 2018-06-14T08:58:36.010

Your code doesn't work because asp:CheckBoxget rendered as

<label id="the_long_webforms_id">
    <input type="checkbox"/>
    I agree to Terms & condition
</label>

So the line

document.getElementById("<%=chkboxTC.ClientID %>").checked

fails. You will need something like

// provided a class from the checkbox from preventing using the client id
// then took the child that is input:checkbox of the label
e.IsValid = document.querySelector('.agree-terms input').checked;

The easier method will be using this

<asp:CheckBox ID="chkIAgreeSub" runat="server"
    CssClass="agree-terms"
    Text="I agree to Terms & condition">
</asp:CheckBox>
<asp:CustomValidator ID="CheckBoxRequired" runat="server" 
    EnableClientScript="true"
    ErrorMessage="You must select this box to proceed"
    ValidationGroup="VG"
    ClientValidationFunction="CheckBoxRequired_ClientValidate">
</asp:CustomValidator>

JavaScript

function CheckBoxRequired_ClientValidate(sender, e)
{
    e.IsValid = document.querySelector('.agree-terms input').checked;
    //e.IsValid = jQuery(".agree-terms input:checkbox").is(':checked');
}

I had used Custom validator also but it still doesn't check checkboc part of code Page_ClientValidate() once it validate it hust ignore function for checkbox. for now as a work around i have disable save button and once enable it once user check the checkbox to get around this problem — Learning, Jun 14 '18 at 09:24
did you try changing the getelementbyid to a queryselector? webforms give littlecontrol on rendered markup — naveen, Jun 14 '18 at 09:25

Asp.net webform with checkbox validation not working

1 Answers1