使用javascript進行Gridview RadioButtonList驗證

Question

當用戶單擊該按鈕時，應選擇所有單選按鈕列表，然后僅應提交那個Button事件，而我使用一個RadioButtonList可以在一個網格視圖內使用一個網格視圖，而使用一個asp.net Button在一個外部網格視圖中使用。

下面是我的網格視圖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>

下面是我的按鈕，它使用gridview的外面。

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

我的問題是沒有選擇插入所有網格視圖數據並且我想驗證。

Answer 1

您可以將javascript客戶端事件綁定到按鈕，並迭代每個單選按鈕列表以驗證是否選擇了“至少選擇單選按鈕”。

$('<%= 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

adil給出的示例需要JQuery庫來實現，如果您不想只使用任何庫，則可以像這樣進行驗證

 <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>