Post
Ask Question

Validation Using jQuery

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" %>  
  2.   
  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>  
  7.   
  8.     <script src="jquery-1.8.2.js" type="text/javascript"></script>  
  9.   
  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.                 }  
  17.   
  18.                 if ($("#txtEmail").val().length === 0) {  
  19.                     alert('Please enter Email.')  
  20.                     return false;  
  21.                 }  
  22.   
  23.                 var IsGenderSelect = false;  
  24.                 $('.Gender').each(function() {  
  25.   
  26.                     if ($(this).find('input[type="radio"]:checked').length == 1) {  
  27.                         IsGenderSelect = true;  
  28.                     }  
  29.                 });  
  30.   
  31.                 if (!IsGenderSelect) {  
  32.                     alert('Please select gender.')  
  33.                     return false;  
  34.                 }  
  35.   
  36.   
  37.                 if (!$('#chkTermsConditions').is(':checked')) {  
  38.                     alert('Please accept Terms & Conditions')  
  39.                     return false;  
  40.                 }  
  41.             })  
  42.         });  
  43.     </script>  
  44.   
  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

 


Similar Articles