Gridview RadioButtonList Validation using javascript

Question

I have one grid-view inside grid-view using one RadioButtonList and outside grid-view using one asp.net Button when user click that button all radio button list should be selected, then only that Button event should be submitted.

Below is my grid-view RadioButtonList.

<asp:TemplateField HeaderText="Add Score">
<ItemTemplate>

<asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="cssrbt">
<asp:ListItem Text="Correct" Value="1"></asp:ListItem>
<asp:ListItem Text="Wrong" Value="2"></asp:ListItem>
</asp:RadioButtonList>

</ItemTemplate>
</asp:TemplateField>

Below is my button which using out side of gridview.

<asp:Button ID="btn_Submit" runat="server" class="btn btn-md btn-danger" Text="Submit" OnClick="btn_Submit_Click"  ValidationGroup="viva" />

My issue is without selection inserting all grid-view data and that I want to validate.

Answer 1

You can bind javascript client event to button and iterate each radiobuttonlist to validate if atleast on radio button is selected.

$('<%= btn_Submit.ClientID %>').click(function(){
  $('.cssrbt').each(function(){
    if($(this).find(':radio:selected').length == 0)
         console.log("One of radio button list option must be selected")
  });
});

Answer 2

The example that adil gave needs JQuery library to implement and if you dont want to use any library only javascript you can validate like this

 <form runat="server" id="form1" action="Test.aspx.cs">

    <asp:TemplateField HeaderText="Add Score">
<ItemTemplate>

<asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="cssrbt">
<asp:ListItem Text="Correct" Value="1"></asp:ListItem>
<asp:ListItem Text="Wrong" Value="2"></asp:ListItem>
</asp:RadioButtonList>


</ItemTemplate>
</asp:TemplateField>


          <asp:Button ID="btn_Submit" runat="server" class="btn btn-md btn-danger" Text="Submit" OnClientClick="return Validate('RadioButtonList1')" OnClick="btn_Submit_OnClick"  />

    </form>


    <script language="javascript" type="text/javascript">
                function Validate(id) {
                    var radiobutton = document.getElementsByName(id);
                    var flag;
                    for (var j = 0; j < radiobutton.length; j++) {
                        if (radiobutton[j].checked !== true) {
                            flag = true;
                        } else {
                            break;
                        }


                    }

                    if (flag) {
                        alert("Please select one option");
                        return false;

                    } 
                }
            </script>