How to validate dynamically created Checkboxlist And RadioButtonlist

Question

I am trying to create a dynamic Multiple-choice Question Quiz, where we have different categories in which there are multiple questions with their individual options. I need to validate that at least one option is selected.

Below is the aspx code which I am using to bind the data:

             <asp:ListView ID="lv_cat" runat="server" OnItemDataBound="lv_cat_ItemDataBound">
                    <EmptyDataTemplate></EmptyDataTemplate>
                    <ItemTemplate>
                        <div class="step">
                            <h4 style="text-align: center;"><%# Eval("Cat_name") %></h4>
                            <asp:Label ID="lbl_Cat_id" runat="server" Text='<%# Eval("cat_id") %>' hidden="true"></asp:Label>

                            <asp:ListView ID="Lv_question" runat="server" OnItemDataBound="Lv_question_ItemDataBound">
                                <EmptyDataTemplate></EmptyDataTemplate>
                                <ItemTemplate>
                                    <div class="row">
                                        <div class="col-md-10">
                                            <h3><%# Eval("Question") %></h3>
                                            <asp:Label ID="lbl_Q_Id" runat="server" Text='<%# Eval("Q_id") %>' hidden="true"></asp:Label>
                                            <asp:Label ID="lbl_Q_ID_Status" runat="server" Text='<%# Eval("status") %>' hidden="true"></asp:Label>
                                            <%--                                                        <ul class="data-list-2">
                                                        <asp:ListView ID="Lv_Answer_check" runat="server" >
                                                            <EmptyDataTemplate></EmptyDataTemplate>
                                                            <ItemTemplate>
                                                                <li>
                                                                    <input name="rate" type="checkbox" class="required check_radio" id="checkbox" value='<%# Eval("A_id") %>'><label><%# Eval("answers") %></label></li>
                                                            </ItemTemplate>
                                                        </asp:ListView>
                                                        <asp:ListView ID="Lv_Answer_Radio" runat="server" >
                                                            <EmptyDataTemplate></EmptyDataTemplate>
                                                            <ItemTemplate>
                                                                <li>
                                                                    <input name="rate" type="radio" id="radiobutton" class="required check_radio" value='<%# Eval("A_id") %>'><label> <%# Eval("answers") %></label></li>

                                                            </ItemTemplate>
                                                        </asp:ListView>
                                                    </ul>
                                                    </br>--%>
                                            <asp:RadioButtonList ID="Rbl_options" runat="server" Style="text-align: left; margin-left: 30px;" >
                                            </asp:RadioButtonList>
                                            <asp:CheckBoxList ID="CheckBoxList1" runat="server" name="CheckBoxList1" Style="text-align: left; margin-left: 30px;" ></asp:CheckBoxList>

                                        </div>
                                    </div>
                                </ItemTemplate>
                            </asp:ListView>
                        </div>
                    </ItemTemplate>
                </asp:ListView>

and below is the javascript code which I am tried to implement.

  <script>
  $("input[type='checkbox']").addClass("answer_check");
  $(".answer_check").each(function () {
      $(this).rules("add", {
          required: true,
          messages: {
              required: "please select atleast one of the below"
          }
      });
  });  </script>

Instead of giving checkboxes a class and then calling class in jquery , add a class to their container or main container as per your requirement then directly call in jquery example: $(".mainClass input[type='checkbox' ") — Deepanshu Sukhija, Oct 30 '18 at 10:17
Your question is similar to this question https://stackoverflow.com/questions/17632180/jquery-validate-array-input-element-which-is-created-dynamically — Bhanu Sengar, Oct 30 '18 at 10:19
Possible duplicate of [jQuery Validate array input element which is created dynamically](https://stackoverflow.com/questions/17632180/jquery-validate-array-input-element-which-is-created-dynamically) — Bhanu Sengar, Oct 30 '18 at 10:22

How to validate dynamically created Checkboxlist And RadioButtonlist

0 Answers0