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:

• ASP.Net Form Validation Using JavaScript
• ASP.Net Form Validation Using equerry

I hope you have read the preceding articles. Let us now start from the basics of ASP.Net validation controls so beginner 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..
 

 

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:

        <bodybgcolor="#3366ff">

           <formid="form2"runat="server">

           <br/>

           <br/>

           <div>

               <table>

                   <tr>

                       <td>

                            Name

                       </td>

                       <td>

                            <asp:TextBoxID="txtUserId"runat="server"></asp:TextBox>

                       </td>

                   </tr>

                   <tr>

                       <td>

                            Email Id

                       </td>

                       <td>

                            <asp:TextBoxID="txtmail"runat="server"></asp:TextBox>

                       </td>

                   </tr>

                   <tr>

                       <td>

                            Gender

                       </td>

                       <td>

                            <asp:DropDownListID="ddlType"runat="server">

                                <asp:ListItemValue="0">-Select-</asp:ListItem>

                                <asp:ListItemValue="1">Male</asp:ListItem>

                                <asp:ListItemValue="2">Female</asp:ListItem>

                            </asp:DropDownList>

                       </td>

                   </tr>

                   <tr>

                       <td>

                            word

                       </td>

                       <td>

                            <asp:TextBoxID="txt1"runat="server"TextMode="word"></asp:TextBox>

                       </td>

                   </tr>

                   <tr>

                       <td>

                            Confirm word

                       </td>

                       <td>

                            <asp:TextBoxID="txt2"runat="server"TextMode="word"></asp:TextBox>

                       </td>

                   </tr>

                   <tr>

                       <td>

                       </td>

                        <td>

                            <asp:ButtonID="btnSave"runat="server"Text="Create"/>

                            <asp:ButtonID="Button1"runat="server"Text="Reset"/>

                       </td>

                   </tr>

               </table>

               <asp:LabelID="Label1"runat="server"Text="Label"></asp:Label>

           </div>

           </form>

       </body>

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

 

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:



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



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



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..



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.