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:
- Client Side
- 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
- RequiredFieldValidation Control
- CompareValidator Control
- RangeValidator Control
- RegularExpressionValidator Control
- CustomValidator Control
- 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
![validationcontrols_gui.gif]()
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.
![customervalidator_gui.gif]()
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>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1" ErrorMessage="User id required"></asp:RequiredFieldValidator> 
  
<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)
{
}
}
![customervalidator_output.gif]()
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
![validationSummary_design.gif]()
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>
<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 & 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
![validationSummary.gif]()
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.