Introduction

In this article, we learn how to validate a RadioButtonList and a DropDownList using JavaScript in ASP.NET. JavaScript provides a way to validate a form's data on the client's computer before sending it to the webserver. If we try to perform all the validation on the server-side then naturally the server is will take time to process the details and finally, it will give a response to the client.
In some cases, some of the data that had been entered by the client was in the wrong form or was simply missing. The server would then need to send all the data back to the client and request that the form be resubmitted with the correct information. So this is not an efficient way to do the validation. So we use JavaScript that validates at the client-side.
To validate RadioButtonList in JavaScript
  1. function getCheckedRadioButton() {
  2. var radio = document.getElementsByName("RadioButtonList1"); //Client ID of the RadioButtonList1
  4. for (var i = 0; i < radio.length; i++) {
  5. if (radio[i].checked) { // Checked property to check radio Button check or not
  7. alert("Radio button having value " + radio[i].value + " was checked."); // Show the checked value
  8. return true;
  10. }
  11. }
  13. alert("Not checked any radio button"); // if not checked any RadioButton from the RadioButtonList
  14. }
The following is the source code for the design of our "Default.ASPX" page:
  1. <asp:RadioButtonList ID="RadioButtonList1" runat="server">
  3. <asp:ListItem Value="Java">Java</asp:ListItem>
  4. <asp:ListItem Value="Dot Net">Dot Net</asp:ListItem>
  6. <asp:ListItem Value="JavaScript">JavaScript</asp:ListItem>
  7. <asp:ListItem Value="jQuery">jQuery</asp:ListItem>
  9. </asp:RadioButtonList>
  10. <br />
  12. <br />
  13. <asp:Button ID="submitForm" runat="server" OnClientClick="getCheckedRadioButton()"
  15. Text="Submit" />
Now to see the output press F5 to execute.
Output
Radio-button-validation-in-asp.net1.jpg
Now click on the Button control without checking a radio button.
Radio-button-validation-in-javaScript2.jpg
Now select a radio button and click on the button.
To validate DropDownList in JavaScript
  1. function validateDropList() {
  3. if (document.getElementById("<%=DropDownList1.ClientID%>").value == "") //Client ID of the DropDownList
  4. {
  6. alert("Please select a country form DropDownList");
  7. return false;
  9. }
  10. else
  12. return true;
  13. }
The following is the source code for the design of our ".ASPX" page:
  1. <div>
  2. <asp:DropDownList ID="DropDownList1" runat="server">
  4. <asp:ListItem Value="">select</asp:ListItem>
  5. <asp:ListItem Value="ind">India</asp:ListItem>
  7. <asp:ListItem Value="pak">PAK</asp:ListItem>
  8. <asp:ListItem Value="usa">US</asp:ListItem>
  10. <asp:ListItem Value="uae">UAE</asp:ListItem>
  11. </asp:DropDownList>
  13. <br />
  14. <br />
  16. <asp:Button ID="submitForm" runat="server" OnClientClick="validateDropList()" Text="Submit" />
  17. </div>
Now press F5 to execute it.
Output
DropDownList-validation-in-JavaScript.jpg
Now click on the Button control without selecting a country from the DropDownList.
DropDownList-validation-in-JavaScript1.jpg