Validation for a checklist not working right?

2 posts, 0 answers
  1. Calin
    Calin avatar
    12 posts
    Member since:
    Feb 2019

    Posted 14 Mar Link to this post

    I am using RadWizard steps to make a survey. One step in the Radwizard is to select at least one service they use out of the list of options. When next button is hit, I need to validate that at least one item was checked. If I click next without checking anything, it just goes right to the next step. If I check then uncheck a box, only then does my "Please choose at least one of the options displayed" show up, and it still lets me hit next. What am I doing wrong? I also tried adding the auto postback =false to the Radwizard step, and the Radcheckboxlist itself, and neither helps.  Not sure what I am doing wrong. My code looks like this:

     

    <telerik:RadWizardStep ID="RadWizardStep2" runat="server" Title="Services">
                    <div>


                        <h3>Please mark all that apply:</h3>
                        <br />
                        <br />
                        <telerik:RadCheckBoxList ID="RadCheckBoxList1" runat="server">
                            <Items>
                                <telerik:ButtonListItem Text="Residential Services" Value="2" />
                                <telerik:ButtonListItem Text="Vocational Services" Value="3" />
                                <telerik:ButtonListItem Text="Transportation/NMT Services" Value="4" />
                                <telerik:ButtonListItem Text="Recreational Services" Value="5" />
                                <telerik:ButtonListItem Text="Supportive living services" Value="6" />
                                <telerik:ButtonListItem Text="Supported employment services" Value="7" />
                                <telerik:ButtonListItem Text="Other" Value="1" />
                            </Items>
                        </telerik:RadCheckBoxList>


                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                            ControlToValidate="RadCheckBoxList1"
                            ErrorMessage="Please choose at least one of the options displayed" />



                    </div>
                    <div>
                        <telerik:RadTextBox ID="OtherTextBox" runat="server" Visible="false"></telerik:RadTextBox>


                    </div>

                </telerik:RadWizardStep>

     

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    616 posts

    Posted 19 Mar Link to this post

    Hello Calin,

    Here is one approach you can take to validate a RadCheckBoxList inside a RadWizard:

    1.  Enable Unobtrusive Validation for your application. We have a dedicated tutorial which goes into more detail on how to do this. In .NET versions 4.5 and later, you can just set the following key in the web.config: http://stackoverflow.com/questions/16660900/webforms-unobtrusivevalidationmode-requires-a-scriptresourcemapping-for-jquery

    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />

    2.  Use a CustomValidator instead of a RequiredFieldValidator.  Using the clientValidationFunction will allow you to determine if a checkbox has been selected using client-side code.  
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function RadCheckBoxValidation(sender, e) {
                var checkboxlist = $find(sender.controltovalidate);
                var selectedList = checkboxlist.get_selectedItems();
                if (selectedList.length > 0) {
                    e.IsValid = true;
                } else {
                    e.IsValid = false;
                }
            }
        </script>
    </telerik:RadCodeBlock>

    3.  Set the same ValidationGroup for the RadWizardStep, RadCheckBoxList, and CustomValidator. 

    4.   Add the RadCheckBoxList as the CustomValidator's ControlToValidate.

    <asp:CustomValidator ID="customValidator1" runat="server" ValidationGroup="validationGroup1"
        ControlToValidate="Questionnaire" ForeColor="Red" CssClass="questionnaire-validation-message"
        ErrorMessage="Please choose at least one of the options displayed" EnableClientScript="true"
        ClientValidationFunction="RadCheckBoxValidation" />

    5.  The RadWizardStep needs to have its CauseValidation property set to true.

    <telerik:RadWizardStep StepType="Step" CausesValidation="true" ValidationGroup="validationGroup1">
       ...
    </telerik:RadWizardStep>

    Please take a look at the attached project which demonstrates the above.  For more details on validation with the RadWizard, please take a look at this documentation.

    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top