Post
Ask Question

ASP.Net Form Validation Using Validation Controls

Background

In my previous articles, we learned how to do validation using JavaScript and jQuery with a basic introduction. In this article, we will learn how to validate a form using ASP.Net validation controls.

If you are a beginner or student then please read my previous articles:

I hope you have read the preceding articles. Let us now start from the basics of ASP.Net validation controls so beginners can also understand.

Presently, ASP.NET has six smart validation controls in .NET 3.5 and 4.0 and in .NET 4.5 these controls are also called smart validation controls because they can perform validation both on the client-side and the server-side.
 
The best thing is ASP.NET performs browser detection when generating the ASP.NET page and makes decisions based on the information it has.

This means that if the browser can support the JavaScript then  the validation occurs on the client-side and if the client cannot support the JavaScript, in other words for client-side validation, this JavaScript is omitted and the validation occurs on the server.
 
Even if client-side validation is initiated on a page, ASP.NET still performs the server-side validation when it receives the submitted page, that ensuring security won't be compromised.
 
Their are Six Servers as well as client-side validation controls in ASP.Net that are as follows..
 
validation.png
 
RequiredFieldValidator control:
 
This control ensures that the control it is used for validation is not empty when the form is submitted. In other words suppose their is one Text Box control and you have used a RequiredFieldValidator to validate that text box; then before submitting the data on the server it checks if the text box is not empty.
 
RangeValidator:
 
Checks that the value of the associated control is within a  specified range. The value and the range can be numerical, a  date or a string. In other words suppose their is one text box and you want to allow only 10 digits or any strings with a specified range using RangeValidator then before submitting the data on the server it ensure that the value is within a specified range.

CompareValidator:
 
Checks that the value of the associated control matches a  specified comparison (less than, greater than, and so on)  against another constant value or control. 
 
RegularExpressionValidator
 
Checks if the value of the control it has to validate matches the specified regular expression.
 
CustomValidator

Allows specification of any client-side JavaScript validation routine and its server-side counterpart to perform your own  custom validation logic .
 
ValidationSummary
 
Shows a summary with the error messages for each failed validator on the page (or in a pop-up message box).

The most common properties of these validation controls are:
 
ControlToValiadte This property specifies the control to validate, you need to specify a control Id.
Display Display behavior of the error message in the validation control, whether the text of the message displayed is Static, Dynamic or None.
EnableClientScript   Use this property to enable or disable client-side validation.
ErrorMessage  Error message displayed in a Validation Summary control when validation fails.
ValidationGroup      The name of the validation group to which this validation control belongs.

I hope you understand the basics of the ASP.Net validation controls, now I will demonstrate this with one sample web application..

Let us first create the web application with two web pages as in the following:

  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010"
  2. "File" - "New Website" - "C# - Empty website" (to avoid adding a master page)
  3. Provide the web site a name, such as Validation or whatever you wish and specify the location
  4. Then right-click on the solution in the Solution Explorer then select "Add New Item" - "Default.aspx page" (add two pages)

We are adding two web pages because our requirement is, in the first web page there is form data to be filled in by the user and only after validating the form data, the form will be redirected to the next page.

The first page source code <body> tag will look as in the following:

  1.  <body bgcolor="#3366ff">  
  2.     <form id="form2" runat="server">  
  3.     <br/>  
  4.     <br/>  
  5.     <div>  
  6.         <table>  
  7.             <tr>  
  8.                 <td>  
  9.                      Name  
  10.                 </td>  
  11.                 <td>  
  12.                      <asp:TextBoxID="txtUserId" runat="server"></asp:TextBox>  
  13.                 </td>  
  14.             </tr>  
  15.             <tr>  
  16.                 <td>  
  17.                      Email Id  
  18.                 </td>  
  19.                 <td>  
  20.                      <asp:TextBoxID="txtmail" runat="server"></asp:TextBox>  
  21.                 </td>  
  22.             </tr>  
  23.             <tr>  
  24.                 <td>  
  25.                      Gender  
  26.                 </td>  
  27.                 <td>  
  28.                      <asp:DropDownListID="ddlType" runat="server">  
  29.                          <asp:List ItemValue="0">-Select-</asp:ListItem>  
  30.                          <asp:List ItemValue="1">Male</asp:ListItem>  
  31.                          <asp:List ItemValue="2">Female</asp:ListItem>  
  32.                      </asp:DropDownList>  
  33.                 </td>  
  34.             </tr>  
  35.             <tr>  
  36.                 <td>  
  37.                      word  
  38.                 </td>  
  39.                 <td>                       
  40.                  <asp:TextBoxID="txt1" runat="server" TextMode="word"></asp:TextBox>  
  41.                 </td>  
  42.             </tr>  
  43.             <tr>  
  44.                 <td>  
  45.                      Confirm word  
  46.                 </td>  
  47.                 <td>  
  48.                      <asp:TextBoxID="txt2" runat="server" TextMode="word"></asp:TextBox>  
  49.                 </td>  
  50.             </tr>  
  51.             <tr>  
  52.                 <td>  
  53.                 </td>  
  54.                  <td>  
  55.                      <asp:ButtonID="btnSave" runat="server" Text="Create"/>  
  56.                      <asp:ButtonID="Button1" runat="server" Text="Reset"/>  
  57.                 </td>  
  58.             </tr>  
  59.         </table>  
  60.         <asp:LabelID="Label1" runat="server" Text="Label"></asp:Label>  
  61.     </div>  
  62.     </form>  
  63. </body>   

The design view of the preceding source code will look as in the following:

Design.png

I hope you have created the same form for demonstration purposes as above.

Now run the application and click on the create button without entering form details, it will show the following message:

summary.png

You can also show the popup message box, using a validation summary control as in:

msgbox.png

Now enter an invalid Email id, it will show the following message:

invalidemailid.png

Now, enter a word and do not enter a confirmation word; it will show the following message:



Now, enter mismatch values in word texboxes it will shows following message



Now enter all the valid details and click on create button,then you will be redirected to next page as..

lastpg.png

Note

For detailed code please download the zip file attached above.

Summary

From all the examples above we see how to validate the form data using ASP.Net validation controls . I hope this article is useful for all students and beginners. If you have any suggestion related to this article then please contact me. My next article explains the advantages and disadvantages of validating the form data using jQuery, ASP.Net validation controls and JavaScript.


Similar Articles