Client-Side Validation

When validation is done on the client browser, then it is known as Client-Side Validation. We use JavaScript to do the Client-Side Validation. For the last ten years, developers are using JavaScript for Client-Side Validation. JavaScript gives us full control over Client-Side Validation. Now, Microsoft is also embracing jQuery. Client-Side Validation is responsive and quick for end users, but not a secure form of validation. Client-Side Validation is faster, typically looks good, often association among messages and input.

Server-Side Validation

When validation occurs on the server, then its known as Server-Side Validation. Server-Side Validation is a secure form of validation. The main advantage of Server-Side Validation is that if the user somehow bypasses the Client-Side Validation, we can still catch the problem on server-side. Server-side provides more security and ensures that no invalid data is processed by the application. Server-Side Validation is done by writing the custom logic for validating all the input.

The following are the Validation Controls in ASP.NET:

RequiredFieldValidator Control
CompareValidator Control
RangeValidator Control
RegularExpressionValidator Control
CustomFieldValidator Control
ValidationSummary

Step 1

Start Visual Studio.

  1. <%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“Default.aspx.cs” Inherits=“_Default” %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  6. <head runat=“server”>  
  7.     <title></title>  
  8.     <style type=“text/css”>  
  9.         .auto-style1 {  
  10.             width: 100%;  
  11.         }  
  12.   
  13.         .auto-style2 {  
  14.             width: 144px;  
  15.         }  
  16.   
  17.         .auto-style3 {  
  18.             width: 144px;  
  19.             text-align: right;  
  20.         }  
  21.   
  22.         .auto-style4 {  
  23.             width: 136px;  
  24.         }  
  25.   
  26.         .auto-style5 {  
  27.             width: 144px;  
  28.             text-align: right;  
  29.             height: 26px;  
  30.         }  
  31.   
  32.         .auto-style6 {  
  33.             width: 136px;  
  34.             height: 26px;  
  35.         }  
  36.   
  37.         .auto-style7 {  
  38.             height: 26px;  
  39.         }  
  40.     </style>  
  41. </head>  
  42. <body>  
  43.     <form id=“form1” runat=“server”>  
  44.         <table class=“auto-style1”>  
  45.             <tr>  
  46.                 <td class=“auto-style3”>User Name</td>  
  47.                 <td class=“auto-style4”>  
  48.                     <asp:TextBox ID=“txtname” runat=“server” Width=“180px”></asp:TextBox>  
  49.                 </td>  
  50.                 <td>  
  51.                     <asp:RequiredFieldValidator ID=“RequiredFieldValidator1” runat=“server” ControlToValidate=“txtname” ErrorMessage=“Plz Enter UserName” ForeColor=“Fuchsia”></asp:RequiredFieldValidator>  
  52.                 </td>  
  53.             </tr>  
  54.             <tr>  
  55.                 <td class=“auto-style3”>Enter Email</td>  
  56.                 <td class=“auto-style4”>  
  57.                     <asp:TextBox ID=“txtemail” runat=“server” Width=“180px”></asp:TextBox>  
  58.                 </td>  
  59.                 <td>  
  60.                     <asp:RequiredFieldValidator ID=“RequiredFieldValidator2” runat=“server” ControlToValidate=“txtemail” ErrorMessage=“Enter EmailID” ForeColor=“Fuchsia”></asp:RequiredFieldValidator>  
  61.                     <br />  
  62.                     <asp:RegularExpressionValidator ID=“RegularExpressionValidator1” runat=“server” ControlToValidate=“txtemail” ErrorMessage=“Plz Enter Correct EmailID” ForeColor=“Fuchsia” ValidationExpression=“\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*”></asp:RegularExpressionValidator>  
  63.                 </td>  
  64.             </tr>  
  65.             <tr>  
  66.                 <td class=“auto-style3”>Enter Password</td>  
  67.                 <td class=“auto-style4”>  
  68.                     <asp:TextBox ID=“txtpass” runat=“server” Width=“180px” TextMode=“Password”></asp:TextBox>  
  69.                 </td>  
  70.                 <td>  
  71.                     <asp:RequiredFieldValidator ID=“RequiredFieldValidator3” runat=“server” ControlToValidate=“txtpass” ErrorMessage=“Plz Enter Password” ForeColor=“Fuchsia”></asp:RequiredFieldValidator>  
  72.                 </td>  
  73.             </tr>  
  74.             <tr>  
  75.                 <td class=“auto-style5”>ReEnter Password</td>  
  76.                 <td class=“auto-style6”>  
  77.                     <asp:TextBox ID=“txtrepass” runat=“server” Width=“180px” TextMode=“Password”></asp:TextBox>  
  78.                 </td>  
  79.                 <td class=“auto-style7”>  
  80.                     <asp:RequiredFieldValidator ID=“RequiredFieldValidator4” runat=“server” ControlToValidate=“txtrepass” ErrorMessage=“ReEnter Password” ForeColor=“Fuchsia”></asp:RequiredFieldValidator>  
  81.                     <br />  
  82.                     <asp:CompareValidator ID=“CompareValidator1” runat=“server” ControlToCompare=“txtpass” ControlToValidate=“txtrepass” ErrorMessage=“Password must me same” ForeColor=“Fuchsia”></asp:CompareValidator>  
  83.                 </td>  
  84.             </tr>  
  85.             <tr>  
  86.                 <td class=“auto-style3”>Enter Full Name</td>  
  87.                 <td class=“auto-style4”>  
  88.                     <asp:TextBox ID=“txtFn” runat=“server” Width=“180px”></asp:TextBox>  
  89.                 </td>  
  90.                 <td>  
  91.                     <asp:RequiredFieldValidator ID=“RequiredFieldValidator5” runat=“server” ControlToValidate=“txtFn” ErrorMessage=“Plz Enter Full Name” ForeColor=“Fuchsia”></asp:RequiredFieldValidator>  
  92.                 </td>  
  93.             </tr>  
  94.             <tr>  
  95.                 <td class=“auto-style3”>Select Your Country</td>  
  96.                 <td class=“auto-style4”>  
  97.                     <asp:DropDownList ID=“ddlCity” runat=“server” Width=“187px”>  
  98.                         <asp:ListItem Value=“0” Selected=“True”>–Select–</asp:ListItem>  
  99.                         <asp:ListItem Value=“1”>India</asp:ListItem>  
  100.                         <asp:ListItem Value=“2”>Australia</asp:ListItem>  
  101.                         <asp:ListItem Value=“3”>America</asp:ListItem>  
  102.                         <asp:ListItem Value=“4”>South Africa</asp:ListItem>  
  103.                         <asp:ListItem Value=“5”>England</asp:ListItem>  
  104.                         <asp:ListItem Value=“6”>Kenya</asp:ListItem>  
  105.                         <asp:ListItem Value=“7”>WestIndies</asp:ListItem>  
  106.                     </asp:DropDownList>  
  107.                 </td>  
  108.                 <td>  
  109.                     <asp:RequiredFieldValidator ID=“RequiredFieldValidator6” runat=“server” InitialValue=“0” ControlToValidate=“ddlCity” ErrorMessage=“Plz Select Your Country” ForeColor=“Fuchsia”></asp:RequiredFieldValidator>  
  110.                 </td>  
  111.             </tr>  
  112.             <tr>  
  113.                 <td class=“auto-style2”> </td>  
  114.                 <td class=“auto-style4”> </td>  
  115.                 <td> </td>  
  116.             </tr>  
  117.             <tr>  
  118.                 <td class=“auto-style2”> </td>  
  119.                 <td class=“auto-style4”>  
  120.                     <asp:Button ID=“Button1” runat=“server” Text=“Submit” ForeColor=“#FF66FF” OnClick=“Button1_Click” />  
  121.                 </td>  
  122.                 <td>  
  123.                     <asp:Label ID=“Label1” runat=“server” Text=“Label” Visible=“false”></asp:Label>  
  124.                 </td>  
  125.             </tr>  
  126.         </table>  
  127.         <div>  
  128.         </div>  
  129.     </form>  
  130.     <p>  
  131.            
  132.     </p>  
  133. </body>  
  134. </html>