Validation Controls in ASP.NET

In this article I will explain about Validation Controls in ASP.NET and how to use them effectively.

Why we use validation controls?

Validation is important part of any web application. User's input must always be validated before sending across different layers of the application.

Validation controls are used to:

• Implement presentation logic.
• To validate user input data.
• Data format, data type and data range is used for validation.

Validation is of two types:

1. Client Side
2. Serve Side

Client side validation is good but we have to be dependent on browser and scripting language support.

Client side validation is considered convenient for users as they get instant feedback. The main advantage is that it prevents a page from being postback to the server until the client validation is executed successfully.

For developer point of view serve side is preferable because it will not fail, it is not dependent on browser and scripting language.

You can use ASP.NET validation, which will ensure client, and server validation. It work on both end; first it will work on client validation and than on server validation. At any cost server validation will work always whether client validation is executed or not. So you have a safety of validation check.

For client script .NET used JavaScript. WebUIValidation.js file is used for client validation by .NET

Validation Controls in ASP.NET

An important aspect of creating ASP.NET Web pages for user input is to be able to check that the information users enter is valid. ASP.NET provides a set of validation controls that provide an easy-to-use but powerful way to check for errors and, if necessary, display messages to the user.

There are six types of validation controls in ASP.NET

1. RequiredFieldValidation Control
2. CompareValidator Control
3. RangeValidator Control
4. RegularExpressionValidator Control
5. CustomValidator Control
6. ValidationSummary

The below table describes the controls and their work:

Validation Control	Description
RequiredFieldValidation	Makes an input control a required field
CompareValidator	Compares the value of one input control to the value of another input control or to a fixed value
RangeValidator	Checks that the user enters a value that falls between two values
RegularExpressionValidator	Ensures that the value of an input control matches a specified pattern
CustomValidator	Allows you to write a method to handle the validation of the value entered
ValidationSummary	Displays a report of all validation errors occurred in a Web page

All validation controls are rendered in form as <span> (label are referred as <span> on client by server)

Important points for validation controls

• ControlToValidate property is mandatory to all validate controls.
• One validation control will validate only one input control but multiple validate control can be assigned to a input control.

Validation Properties
Usually, Validation is invoked in response to user actions like clicking submit button or entering data. Suppose, you wish to perform validation on page when user clicks submit button.

Server validation will only performed when CauseValidation is set to true.

When the value of the CausesValidation property is set to true, you can also use the ValidationGroup property to specify the name of the validation group for which the Button control causes validation.

Page has a Validate() method. If it is true this methods is executed. Validate() executes each validation control.

To make this happen, simply set the CauseValidation property to true for submit button as shown below:

<asp:Button ID="Button2" runat="server" Text="Submit" CausesValidation=true />

Lets understand validation controls one by one with practical demonstration:

RequiredFieldValidation Control

The RequiredFieldValidator control is simple validation control, which checks to see if the data is entered for the input control. You can have a RequiredFieldValidator control for each form element on which you wish to enforce Mandatory Field rule.

<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" Style="top: 98px;
        left: 367px; position: absolute; height: 26px; width: 162px" ErrorMessage="password required"
        ControlToValidate="TextBox2"></asp:RequiredFieldValidator>

CompareValidator Control

The CompareValidator control allows you to make comparison to compare data entered in an input control with a constant value or a value in a different control.

It can most commonly be used when you need to confirm password entered by the user at the registration time. The data is always case sensitive.

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Style="top: 145px;
        left: 367px; position: absolute; height: 26px; width: 162px" ErrorMessage="password required"
        ControlToValidate="TextBox3"></asp:RequiredFieldValidator>

RangeValidator Control

The RangeValidator Server Control is another validator control, which checks to see if a control value is within a valid range. The attributes that are necessary to this control are: MaximumValue, MinimumValue, and Type.

<asp:RangeValidator ID="RangeValidator1" runat="server" Style="top: 194px; left: 365px;
            position: absolute; height: 22px; width: 105px"
        ErrorMessage="RangeValidator" ControlToValidate="TextBox4" MaximumValue="100"
        MinimumValue="18" Type="Integer"></asp:RangeValidator>

RegularExpressionValidator Control

A regular expression is a powerful pattern matching language that can be used to identify simple and complex characters sequence that would otherwise require writing code to perform.

Using RegularExpressionValidator server control, you can check a user's input based on a pattern that you define using a regular expression.

It is used to validate complex expressions. These expressions can be phone number, email address, zip code and many more. Using Regular Expression Validator is very simple. Simply set the ValidationExpression property to any type of expression you want and it will validate it.

If you don't find your desired regular expression, you can create your custom one.

In the example I have checked the email id format:

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" Style="top: 234px;
        left: 366px; position: absolute; height: 22px; width: 177px"
        ErrorMessage="RegularExpressionValidator" ControlToValidate="TextBox5"
        ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

The complete code for the above 4 controls is as:

Default.aspx Design

Default.aspx Source code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label3" runat="server" Style="top: 241px; left: 70px; position: absolute;
            height: 22px; width: 128px; bottom: 282px;" Text="Enter your email id:"></asp:Label>
        <asp:Label ID="Label1" runat="server" Style="top: 54px; left: 74px; position: absolute;
            height: 22px; width: 128px" Text="Enter your name:"></asp:Label>
        <asp:TextBox ID="TextBox1" runat="server" Style="top: 54px; left: 221px; position: absolute;
            height: 22px; width: 128px; right: 396px;"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Style="top: 56px;
            left: 378px; position: absolute; height: 22px; width: 128px" ErrorMessage="RequiredFieldValidator"
            ControlToValidate="TextBox1">name is
        mandatory </asp:RequiredFieldValidator>
    </div>
    <p>
        <asp:Button ID="Button1" runat="server" Style="top: 311px; left: 267px; position: absolute;
            height: 26px; width: 61px" Text="Submit" />
    </p>
    <asp:TextBox ID="TextBox3" runat="server" Style="top: 145px; left: 217px; position: absolute;
        height: 22px; width: 131px" TextMode="Password"></asp:TextBox>
    <p>
        <asp:TextBox ID="TextBox2" runat="server" Style="top: 101px; left: 218px; position: absolute;
            height: 22px; width: 131px" TextMode="Password"></asp:TextBox>
        <asp:Label ID="Label4" runat="server" Style="top: 105px; left: 74px; position: absolute;
            height: 22px; width: 128px" Text="Password"></asp:Label>
        <asp:TextBox ID="TextBox5" runat="server" Style="top: 239px; left: 210px; position: absolute;
            height: 22px; width: 134px"></asp:TextBox>
    </p>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" Style="top: 98px;
        left: 367px; position: absolute; height: 26px; width: 162px" ErrorMessage="password required"
        ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Style="top: 145px;
        left: 367px; position: absolute; height: 26px; width: 162px" ErrorMessage="password required"
        ControlToValidate="TextBox3"></asp:RequiredFieldValidator>
    <asp:CompareValidator ID="CompareValidator1" runat="server" Style="top: 149px; left: 512px;
        position: absolute; height: 26px; width: 162px" ErrorMessage="CompareValidator"
        ControlToValidate="TextBox3" ValueToCompare="hello"></asp:CompareValidator>
    <p>
        <asp:Label ID="Label5" runat="server" Style="top: 148px; left: 71px; position: absolute;
            height: 22px; width: 128px; bottom: 375px;" Text="Confirm Password"></asp:Label>
        <asp:TextBox ID="TextBox4" runat="server" Style="top: 194px; left: 212px; position: absolute;
            height: 22px; width: 140px"></asp:TextBox>
        <asp:Label ID="Label6" runat="server" Style="top: 194px; left: 71px; position: absolute;
            height: 22px; width: 128px; bottom: 329px;" Text="Enter your age:"></asp:Label>
    </p>
    <asp:RangeValidator ID="RangeValidator1" runat="server" Style="top: 194px; left: 365px;
        position: absolute; height: 22px; width: 105px" ErrorMessage="RangeValidator"
        ControlToValidate="TextBox4" MaximumValue="100" MinimumValue="18" Type="Integer"></asp:RangeValidator>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" Style="top: 234px;
        left: 366px; position: absolute; height: 22px; width: 177px"
        ErrorMessage="RegularExpressionValidator" ControlToValidate="TextBox5"
        ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
    </form>
</body>
</html>

CustomValidator Control

You can solve your purpose with ASP.NET validation control. But if you still don't find solution you can create your own custom validator control.

The CustomValidator Control can be used on client side and server side. JavaScript is used to do client validation and you can use any .NET language to do server side validation.

I will explain you CustomValidator using server side. You should rely more on server side validation.

To write CustomValidator on server side you override ServerValidate event.


Source Code

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="User ID:"></asp:Label>
&nbsp;<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
&nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ControlToValidate="TextBox1" ErrorMessage="User id required"></asp:RequiredFieldValidator>&nbsp
&nbsp&nbsp
        <asp:CustomValidator ID="CustomValidator1" runat="server" OnServerValidate="UserCustomValidate"
            ControlToValidate="TextBox1"
            ErrorMessage="User ID should have atleast a capital, small and digit and should be greater than 5 and less
than 26 letters"
            SetFocusOnError="True"></asp:CustomValidator>
        </div>
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" />
    </form>
</body>
</html>

Code behind file

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void UserCustomValidate(object source, ServerValidateEventArgs args)
    {
        string str = args.Value;
        args.IsValid = false;
        //checking for input length greater than 6 and less than 25 characters
        if (str.Length < 6 || str.Length > 25)
        {
            return;
        }
         //checking for a atleast a single capital letter
        bool capital = false;
        foreach (char ch in str)
        {
            if (ch >= 'A' && ch <= 'Z')
            {
                capital = true;
                break;
            }
        }
        if (!capital)
        {
            return;
        }
        //checking for a atleast a single lower letter
        bool lower = false;
         foreach (char ch in str)
        {
            if (ch >= 'a' && ch <= 'z')
            {
                lower = true;
                break;
            }
        }
        if (!lower)
        {
            return;
        }
        bool digit = false;
        foreach (char ch in str)
        {
            if (ch >= '0' && ch <= '9')
            {
                digit = true;
                break;
            }
        }
         if (!digit)
        {
            return;
        }
        args.IsValid = true;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
    }
   protected void Button1_Click(object sender, EventArgs e)
    {
    }
}


The server side validation you write does not need to provide the exact same validation as that of the client side validation. The client side validation can check for the user input data for range and type and server side validation can check for matching of data with database. Both server side and client side validation can be used for total solution.

ValidationSummary

ASP.NET has provided an additional control that complements the validator controls.

The ValidationSummary control is reporting control, which is used by the other validation controls on a page.

You can use this validation control to consolidate errors reporting for all the validation errors that occur on a page instead of leaving this up to each and every individual validation control.

The validation summary control will collect all the error messages of all the non-valid controls and put them in a tidy list.

<asp:ValidationSummary ID="ValidationSummary1" runat="server"
        style="top: 390px; left: 44px; position: absolute; height: 38px; width: 625px" />

Both ErrorMessage and Text properties are used to display error messages. Text error message have precedence.

If you are using ValidationSummary than only ErrorMessage and Text property is used.

The complete code for the above ValidationSummary is as:

Default.aspx Design


Default.aspx Source code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Style="top: 239px; left: 75px; position: absolute;
            height: 22px; width: 128px" Text="Enter your Age:"></asp:Label>
        &nbsp;
        <asp:Label ID="Label2" runat="server" Style="top: 94px; left: 81px; position: absolute;
            height: 22px; width: 128px" Text="Enter your name:"></asp:Label>
    </div>
    <asp:TextBox ID="TextBox1" runat="server" Style="top: 95px; left: 250px; position: absolute;
        height: 22px; width: 128px"></asp:TextBox>
    <p>
        <asp:TextBox ID="TextBox4" runat="server" Style="top: 195px; left: 249px; position: absolute;
            height: 22px; width: 127px"></asp:TextBox>
    </p>
    <p>
        <asp:Label ID="Label3" runat="server" Style="top: 148px; left: 76px; position: absolute;
            height: 22px; width: 128px" Text="Enter Password:"></asp:Label>
    </p>
    <p>
        <asp:TextBox ID="TextBox3" runat="server" Style="top: 146px; left: 249px; position: absolute;
            height: 22px; width: 127px" TextMode="Password"></asp:TextBox>
    </p>
   <p>
        <asp:Label ID="Label4" runat="server" Style="top: 197px; left: 75px; position: absolute;
            height: 22px; width: 128px" Text="Confirm Password:"></asp:Label>
    </p>
    <asp:TextBox ID="TextBox2" runat="server" Style="top: 236px; left: 250px; position: absolute;
        height: 22px; width: 127px" TextMode="Password"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator1" runat="server" Style="top: 197px; left: 522px;
        position: absolute; height: 22px; width: 17px" ErrorMessage="CompareValidator"
        ControlToCompare="TextBox2" ControlToValidate="TextBox3">*</asp:CompareValidator>
    <p>
        <asp:Button ID="Button1" runat="server" Style="top: 333px; left: 248px; position: absolute;
            height: 26px; width: 56px" Text="Submit" />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Style="top: 196px;
            left: 393px; position: absolute; height: 22px; width: 22px" ErrorMessage="Confirm Password mandatory &amp; should match password"
            ControlToValidate="TextBox3">*</asp:RequiredFieldValidator>
        <asp:RangeValidator ID="RangeValidator1" runat="server" Style="top: 235px; left: 388px;
            position: absolute; height: 22px; width: 156px; bottom: 288px;" ErrorMessage="age between 18-100"
            ControlToValidate="TextBox4" MaximumValue="100" MinimumValue="18" Type="Integer">*</asp:RangeValidator>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Style="top: 92px;
            left: 393px; position: absolute; height: 22px; width: 156px" ErrorMessage="Name is required"
            ControlToValidate="TextBox1">*</asp:RequiredFieldValidator>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" Style="top: 146px;
            left: 391px; position: absolute; height: 22px; width: 156px" ErrorMessage="Password mandatory"
            ControlToValidate="TextBox2">*</asp:RequiredFieldValidator>
    </p>
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" Style="top: 390px;
        left: 44px; position: absolute; height: 38px; width: 625px" />
    </form>
</body>
</html>

Output of ValidationSummary program



Conclusion

I hope that this article would have helped you in understanding the Validation Controls in ASP.NET. Please share it if you know more about this article. Your feedback and constructive contributions are welcome.