This article shows how to apply validation on a TextBox, CheckBox, RadioButtin in ASP.NET C# using jQuery.

Here in this example I am using a registration form and on button click I am validating all the controls. The following is my aspx code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title>Validation Using jQuery</title>
  8. <script src="jquery-1.8.2.js" type="text/javascript"></script>
  10. <script type="text/javascript">
  11. $(function() {
  12. $('#btnSubmit').click(function() {
  13. if ($("#txtName").val().length === 0) {
  14. alert('Please enter name.')
  15. return false;
  16. }
  18. if ($("#txtEmail").val().length === 0) {
  19. alert('Please enter Email.')
  20. return false;
  21. }
  23. var IsGenderSelect = false;
  24. $('.Gender').each(function() {
  26. if ($(this).find('input[type="radio"]:checked').length == 1) {
  27. IsGenderSelect = true;
  28. }
  29. });
  31. if (!IsGenderSelect) {
  32. alert('Please select gender.')
  33. return false;
  34. }
  37. if (!$('#chkTermsConditions').is(':checked')) {
  38. alert('Please accept Terms & Conditions')
  39. return false;
  40. }
  41. })
  42. });
  43. </script>
  45. </head>
  46. <body>
  47. <form id="form1" runat="server">
  48. <div>
  49. <table cellpadding="5" cellspacing="5" width="70%" align="center" style="background-color: SkyBlue;">
  50. <tr>
  51. <td align="center" colspan="2" style="background-color: Green; font-weight: bold;
  52. font-size: 14pt; color: Blue; font-family: Arial;">
  53. Registration Form
  54. </td>
  55. </tr>
  56. <tr>
  57. <td align="right" width="40%">
  58. Name #:
  59. </td>
  60. <td>
  61. <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
  62. </td>
  63. </tr>
  64. <tr>
  65. <td align="right">
  66. Email #:
  67. </td>
  68. <td>
  69. <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
  70. </td>
  71. </tr>
  72. <tr>
  73. <td align="right">
  74. Sex #:
  75. </td>
  76. <td>
  77. <asp:RadioButton ID="rdbMale" runat="server" Text="Male" GroupName="Gender" CssClass="Gender" />
  78. <asp:RadioButton ID="rdbFemale" runat="server" Text="Female" GroupName="Gender" CssClass="Gender" />
  79. </td>
  80. </tr>
  81. <tr>
  82. <td>
  83. <td>
  84. <asp:CheckBox ID="chkTermsConditions" runat="server" Text="Terms & Conditions" />
  85. </td>
  86. </td>
  87. </tr>
  88. <tr>
  89. <td>
  90. </td>
  91. <td>
  92. <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
  93. </td>
  94. </tr>
  95. </table>
  96. </div>
  97. </form>
  98. </body>
  99. </html>
Now Run the application

If you don't enter something into text boxes:

registration form
Image 1

message from webpage
Image 2

If you don't select gender:

save name
Image 3

If you don't accept Terms & Conditions:

save record
Image 4

submit data
Image 5