Sunday, April 19, 2020

Validation Controls in ASP.NET

ASP.NET validation controls define an important role in validating the user input data. Whenever the user gives the input, it must always be validated before sending it across to various layers of an application. If we get the user input with validation, then chances are that we are sending the wrong data. So, validation is a good idea to do whenever we are taking input from the user.
There are the following two types of validation in ASP.NET:
  • Client-Side Validation
  • Server-Side Validation
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.
Step 2
Now, we need to create a website using "File" -> "New" -> "Website".
Step 3
Now, select the ASP.NET Empty Website and click on the OK button.
Step 4
Now, add the Web form by right-clicking on the website and provide a name to the Web Form.
I have given the page name as Validator. 
Step 5
After the web form is created, we will design the form as shown in the following screenshot.
Step 6
We will write the following code in the Validator.aspx page.
  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>  
Step 7
Now, we need to execute the web form using the F5 key and will get the following window form.
I have also written the following code for a button click.
  1. protected void Button1_Click(object sender, EventArgs e)  
  2.    {  
  3.        Label1.Visible = true;  
  4.        Label1.Text = "All Validator working Perfectly!!!!!!";  
  5.          
  6.    }  
 Step 8
Now, check whether the validation is working correctly or not. When we click on the submit button, then the following error can be seen.
The error shows that the textboxes can't be blank.
Step 9
Now, check the email validation on the web form. If we write the wrong email-id, then the error message appears on the form.
Step 10
Now, we need to check the password validation. If we are writing a different password into the password textboxes, then the error message appears on the web form.
Step 11
Now, we need to check the validation of the dropdown list. If we don't select the country name, then the following error message appears: "plz select your country name".
When all the textbooxes have been filled, select the country name. Now, on clicking the submit button, the following message appears.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)