ASP.NET - Validation Controls
Rakesh Singh NARESH I TECHNOLOGIES HYDERABAD 0
ASP.NET Validation Web Server Controls Overview: 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. Whenever we have an application that expects user input, then it becomes important to ensure the validity of the data input by the user. We might have scenarios when some data is mandatory for the user to enter. There are scenarios when the user data has to be in some particular format example Email Id. There could be scenarios when we want the data to be in some range example date input. So for all the above mentioned scenarios, if we take the user input without validation, then chances are that we will end up having wrong data with us (perhaps in database). If it is a bad day for us then possibly our application might also end up behaving in an unexpected manner and even crash on us (like if we try to convert a non numeric string to int). Worst case scenario, the user will use the input field to perform SQL injection and cause serious damage to our database. So it is always a good idea to have validation in place whenever we are taking input from the user.
Types of Validation: There are two ways we can perform validation:
Client side validation Server side validation
Client Side Validation: Client side validation is something that will happen on users' browser. The validation will occur before the data gets posted back to server. It is a good idea to have client side validation as the user gets to know what needs to be changed immediately, i.e., no round-trips to servers are made. So from the users' point of view, it gives him fast response and from the developers' point of view, it saves valuable resources of server. JavaScript is most widely used to perform client side validation. From decades, developers have been using JavaScript for client side validation. It is always a good idea to have knowledge of JavaScript as it gives us full control over client side validation. Now Microsoft is also embracing jQuery (JavaScript Library) in its current versions (ASP.NET 4.5) so perhaps JavaScript and/or jQuery should be the right thing to use for client side validation. JavaScript provides full control to the developer on how client side validation should happen but developers will have to write the validation code themselves. ASP.NET also provides some validation controls to perform client side validation which could help the developers in putting client side validation in place without writing a lot of code. These controls will also use JavaSscript underneath to perform validations.
Server Side Validation: Server side validation occurs at server. The benefit of having server side validation is that if the user somehow bypasses the client side validation (accidentally or deliberately), then we can catch the problem on the server side. So having server side validation provides more security and ensures that no invalid data gets processed by the application. Server side validation is done by writing our custom logic for validating all the input. ASP.NET also provides us some controls which will facilitate the server side validation and provides a framework for the developers to do the same.
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. Page |1
NOTE: Web developer may choose to go with any one type of validation but usually it is a good idea to have client side validation and same validation on server side too. It sure takes some resources of server to validate the already validated data (on client side) but it ensures security and that is always good.
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. Validation controls check user input in SelectionList and TextBox controls. Validation occurs when the form is posted to the server. The validation controls test the user's input and, if the input fails any of the validation tests, ASP.NET sends the page back to the client device. When this occurs, the validation controls that detected errors display error messages. Validation controls are normally not visible when a form is displayed on a target device. However, if the validation control detects an error, it displays an error message that you specify. The error message can be displayed in a variety of ways:
Each validation control can individually display an error message. When it does, it displays the error message at the position of the validation control on the form.
Validation errors can be collected in a validation summary control and displayed in one place, such as at the top of the page.
Types of Validation Controls in ASP.NET: There are six types of validation controls supported in ASP.NET Web Application Framework:
RequiredFieldValidator Control
CompareValidator Control
RangeValidator Control
RegularExpressionValidator Control
CustomValidator Control
ValidationSummary Control
This set of controls provide Rapid Application Development (RAD) features for automatically checking the specified validity of user inputs. These controls are mapped to the their corresponding classes available in the System.Web.UI.WebControls namespace to use programmatically. One of the most tiresome tasks when building interactive web applications is the requirement for validating values that the user enters into the input controls. This is particularly the case if we need to perform client-side as well as server side validation. Mostly, we use JavaScript for client side coding. Help is at hand with the range of validation controls that are included in ASP.NET. They cover almost all the validation scenarios. A validation control enables us to validate an input and display an error message if necessary. It is very much like other server-side controls, with certain additional methods and properties. First, the server treats it as an invisible control. After the user has entered erroneous data, it becomes visible. It is a powerful, rapid application development feature; however, a developer needs to understand its behavior and the methods thoroughly before he or she can appreciate it. All the validation controls inherit from the base class BaseValidator, which is part of the class library namespace i.e. System.Web.UI.WebControls. System.Web.UI.WebControls.BaseValidator exposes a series of properties and methods that are common to all the validation controls.
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. Page |2
BaseValidator Class: The validation control classes are inherited from the BaseValidator class hence they inherit its properties and methods. Therefore, it would help to take a look at the properties and the methods of this base class, which are common for all the validation controls: Members
Description
ControlToValidate
Indicates the input control to validate.
Display
Indicates how the error message is shown.
EnableClientScript
Indicates whether client side validation will take.
Enabled
Enables or disables the validator.
ErrorMessage
Indicates error string.
Text
Error text to be shown if validation fails.
IsValid
Indicates whether the value of the control is valid.
SetFocusOnError
It indicates whether in case of an invalid control, the focus should switch to the related input control.
ValidationGroup
The logical group of multiple validators, where this control belongs.
Validate()
This method revalidates the control and updates the IsValid property.
Note: The ValidationSummary control does not perform any validation but shows a summary of all validation errors in the page caused by all validation controls. The summary displays the values of the ErrorMessage property of all validation controls that failed validation.
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. Page |3
RequiredFieldValidator 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. OR The RequiredFieldValidator control ensures that the required field is not empty. It is generally tied to a text box to force input into the text box. OR Use the RequiredFieldValidator control to validate that the user entered a data value into a SelectionList or TextBox control. With a SelectionList control, the user must select an item in the list. With a TextBox control, the user must enter a value. Note: Required-entry validation is frequently used in conjunction with other types of validation controls. You can use as many validation controls for a user-entry field as necessary. Set the RequiredFieldValidator control's ControlToValidate property to the ID of the SelectionList or TextBox control to validate. If the data value is not present, the RequiredFieldValidator control displays the value of its ErrorMessage property. Note: If you enter a string into the Text property, the RequiredFieldValidator control displays that text when an error occurs. If the Text property is left empty, the RequiredFieldValidator control displays the string in the ErrorMessage property. Example1: To validate a required entry into the TextBox: Let's say we have a simple form with name field and we don't want this to be empty. so what we can do is add a RequiredFieldValidator to the page, set the ControlToValidate to the ID of the name input field, set the error message property. When we try to do a postback without entering name, then the postback will not happen and the error message text will be displayed in place to our validation control. HTML Source:
Enter Name: Output:
Example2: Validate ListBox and DropDown List using Required Field Validator: In asp.net there are some situations when a web developer needs to validate ListBox and DropDownList using Required Field Validator. It seems to be little bit tricky and also it avoids the use of JavaScript function to validate ListBox and DropDownList. . I am sharing the code which will help the Developers:
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. Page |4
ListBox Validation: HTML Source: Select City:
Hyderabad Chennai Banglore Mumbai Pune Delhi Lucknow
Output:
DropDownList Validation: HTML Source: Select City: --Select-- Hyderabad Chennai Banglore Mumbai Pune Delhi Lucknow
Output:
Note: For validating DropDown List, make sure you have "--Select--" option value 0 other wise validation on it will not work.
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. Page |5
CompareValidator Control: The CompareValidator control compares a value in one control with a fixed value or a value in another control. OR 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. OR The CompareValidator control validates data values in the SelectionList or TextBox control. Set the CompareValidator control's ControlToValidate property to the name of the SelectionList or TextBox control to validate. Your application can use the CompareValidator control to compare the data value entered by the user to a value in another control. To do so, set the ControlToCompare property to the string in the ID property of the SelectionList or TextBox control that contains the comparison value. Alternatively, your application can use the CompareValidator control to compare a SelectionList or TextBox control's data value to a literal value that you specify at design time. To compare the control's data value to a literal value, set the CompareValidator control's ValueToCompare property to the literal comparison value. Whether your application compares a control's data value to the value in another control or to a literal value, you must specify the data type of the values being compared. Set the data type by using the CompareValidator control's Type property. Note: If the user leaves the targeted control blank, the control passes the comparison validation. To force the user to enter a value, add a RequiredFieldValidator control as well.
It has the following specific properties: Properties
Description
Type
It specifies the data type.
ControlToCompare
It specifies the value of the input control to compare with.
ValueToCompare
It specifies the constant value to compare with.
Operator
It specifies the comparison operator, the available values are: Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual, and DataTypeCheck.
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. Page |6
Add and Configure a CompareValidator Control 1. 2. 3. 4.
Add a CompareValidator control to the form that contains the control to validate. Set the ControlToValidate property to the ID of the control to validate. Set the Type property to the type of the data to be validated. Select the value to be compared to the input data in the target control using one of the following methods: o Set the ControlToCompare property to the ID of the control that you want to use for comparison. o Enter a literal value to compare to in the ValueToCompare property.
Note: If you enter values in both the ControlToCompare and ValueToCompare properties, the ControlToCompare property takes precedence. 5. Specify a string in the ErrorMessage property for the CompareValidator control to display if validation fails. Note: If you enter a string into the Text property, the CompareValidator control displays that text when an error occurs. If the Text property is empty, the CompareValidator control displays the string in the ErrorMessage property. 6. Set the Operator property to one of the following comparison operations: Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual, or DataTypeCheck. Use the DataTypeCheck enumeration value if you want to validate against a data type. Example1: Create an example of CompareValidator Control to validate the “Confirm Password” Input Field must be same as “Password” Input Field in the Registrtaion Form: HTML Source: | Enter Password: | |
| Enter Confirm Password: | |
| |
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. Page |7
Ouptput:
Example2: Create an example of CompareValidator Control to validate the “Relieving Date” Input Field must be greater than “Joining Date” Input Field in the Employee Details Form: HTML Source: | Enter Joining Date: | |
| Enter Relieving Date: | |
| |
Output:
Example3: Create an example of CompareValidator Control to validate the “Emp Salary” Input Field must be greater than equal to a constant value in the Employee Details Form: HTML Source: | Enter Emp Salary: |
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. Page |8
|
| |
Output:
RangeValidator Control: In scenarios where we want to ensure that the value entered by the user is in some predefined range, we can use this control. The RangeValidator control verifies that the input value falls within a predetermined range. OR 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.
It has three specific properties: Properties
Description
Type
It defines the type of the data. The available values are: Currency, Date, Double, Integer, and String.
MinimumValue
It specifies the minimum value of the range.
MaximumValue
It specifies the maximum value of the range.
Add and Configure a RangeValidator Control: Use the RangeValidator control to check that the value of another control falls within a range that you specify. Note: If the user leaves the targeted control blank, the control passes the range validation. To force the user to enter a value, add a RequiredFieldValidatorcontrol as well.
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. Page |9
To validate the value of a control against a range of values 1. Add a RangeValidator control to the form that contains the target control. 2. Set the control's ControlToValidate property to the ID of the control that you want to validate. 3. Select the type of the data being validated from one of the types in the drop-down list next to the Type property. Note: If the value in the targeted control is not valid according to the Type property, the validation fails. 4. Set the low and high values of the range with the MinimumValue and MaximumValue properties, respectively. 5. Enter text for the ErrorMessage property. The RangeValidator control displays this text when the control being validated fails the test. Note: If you enter text into the Text property, the RangeValidator control displays that text when an error occurs. If the Text property is left empty, the RangeValidator control displays the string in the ErrorMessage property. Example1: Create an example of RangeValidator to validate the age of the user and the valid age range is between 18 to 60. HTML Source: Output:
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.
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 10
OR The RegularExpressionValidator allows validating the input text by matching against a pattern of a regular expression. The regular expression is set in the ValidationExpression property.
Add and Configure a RegularExpressionValidator Control: Use the RegularExpressionValidator control to match the value in another control against a predefined pattern. Note: If the user leaves the targeted control blank, the control passes validation. To force the user to enter a value, add a RequiredFieldValidator control in addition to the RegularExpressionValidator. To validate the entry in a control by matching a pattern: 1. Add a RegularExpressionValidator control to the form that contains the target control. 2. Set the ControlToValidate property to the ID of the control that you want to validate. 3. Type a regular expression into the ValidationExpression property in the Properties window. Alternatively, click the ellipsis button ( ) next to the ValidationExpression property to display the Regular Expression Editor dialog box, and then select a predefined regular expression as shown below.
4. Set the ErrorMessage property to the text to display in the RegularExpressionValidator control if the targeted control fails validation. Note: If you enter a string into the Text property, the RegularExpressionValidator control displays that text when an error occurs. If the Text property is left empty, the RegularExpressionValidator control displays the string defined in the ErrorMessage property. Example1: Create an example of RegularExpressionValidator Control to validate an email id format: HTML Source: | Enter Email ID: |
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 11
ErrorMessage="Please Enter Valid Email ID Format" ForeColor="Red" SetFocusOnError="true"> |
| |
Output:
Example2: Create an example of RegularExpressionValidator Control to validate Website Url format: HTML Source: | Enter Company Website Url: | |
| Hint:http(s)://www.abc.com |
| |
Output:
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 12
Example3: : Create an example of RegularExpressionValidator Control to validate Pin Code format (should be six digits only): HTML Source: Output:
CustomValidator Control: If the above validation controls provided in the ASP.NET do not suit your needs, use the CustomValidator control to create a control that performs customized validation as per your needs. The CustomValidator control allows writing application specific custom validation routines for both the client side and the server side validation. The client side validation is accomplished through the ClientValidationFunction property. The client side validation routine should be written in a scripting language, such as JavaScript, which the browser can understand. The server side validation routine must be called from the control's ServerValidate event handler. The server side validation routine should be written in any .Net language, like C# or VB.Net. Like other validation controls, the CustomValidator control validates input from the TextBox or SelectionList control. Set the CustomValidator control's ControlToValidate property to the ID of the control to validate. When a form that contains a CustomValidator control is posted to the server, the CustomValidator control raises its ServerValidate event. You must provide a handler with the following signature: private void EventHandlerName(object source, System.Web.UI.WebControls.ServerValidateEventArgs args) { } In these examples, EventHandlerName is the name of the method that handles the ServerValidate event. The source parameter is a reference to theCustomValidator control calling this event handler. The args parameter contains the user input to validate. The event handler receives the user's input in the args.Value property. If the input is valid, the code sets args.IsValid to true. If the event handler for the ServerValidate event sets args.IsValid to false, the CustomValidator control displays the text of its ErrorMessage property.
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 13
Add and Configure a CustomValidator Control: Use the CustomValidator control to perform customized validation on input data in TextBox and SelectionList controls. Note: If the user leaves the targeted control blank, it passes the custom validation test. To force the user to enter a value, add a RequiredFieldValidator control as well. To validate with a CustomValidator control: 1. Add a CustomValidator control to the form that contains the target control. 2. Set the ControlToValidate property to the ID of the control to validate. 3. Set the ErrorMessage property to a string to display if the target control fails validation. Note: If you enter a string into the Text property, the CustomValidator control displays that text when an error occurs. If the Text property is left empty, the CustomValidator control displays the string defined in the ErrorMessage property. 4. Switch to Design view, and then double-click the CustomValidator control. Visual Studio opens the code editor with an empty validation method. 5. Create the handler. Example1: Create an example of CustomValidator Control to validate Password Field should have atleast a capital, small and digit and should be greater than 6 and less than 21 letters. HTML Source: Code View: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 14
public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) { string str = args.Value; args.IsValid = false; //checking for input length greater than 6 and less than 21 characters if (str.Length < 6 || str.Length > 21) { 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)
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 15
{ return; } args.IsValid = true; } protected void btnSubmit_Click(object sender, EventArgs e) { if (CustomValidator1.IsValid) { Response.Write("Its Validated Successfully!!!"); } } } Output:
Example2: Create an example of CustomValidator to validate an input field to enter even number value only via clientside functionality: HTML Source: JavaScript Code: UI Markup: Enter Even Number Value:
Output:
ValidationSummary Control: 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.
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 16
The validation summary control will collect all the error messages of all the non-valid controls and put them in an organised list. The ValidationSummary control does not perform any validation but shows a summary of all errors in the page. The summary displays the values of the ErrorMessage property of all validation controls that failed validation. The following two mutually inclusive properties list out the error message: ShowSummary : shows the error messages in specified format. ShowMessageBox : shows the error messages in a separate window.
Add and Configure a ValidationSummary Control: Use the ValidationSummary control to display a list of validation errors that occurred when a form was submitted. This control lists all the error messages generated by the other validation controls on the form. The ValidationSummary control obtains the error message strings from the ErrorMessage properties of the validation controls whose tests failed. To display a summary of error messages: 1. Drag a ValidationSummary control to the form on which to display the error messages. Place the ValidationSummary control where you want to display the collected error messages on a target device. 2. Optionally, type header text to precede the error messages in the HeaderText property. 3. Optionally, set the DisplayMode property to gets or sets the display mode of the validation summary control. Example1: Create an Example of ValidationSummary Control to show all validation errors caused by validation controls on a page in the form of wither summary or message box: HTML Source: | |
| First Name: | |
| Last Name: | |
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 17
Email ID: | |
| Password: | |
| Confirm Password: | |
| |
Output:
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 18
Validation Groups: Complex pages have different groups of information provided in different panels. In such situation, a need might arise for performing validation separately for separate group. This kind of situation is handled using validation groups. To create a validation group, you should put the input controls and the validation controls into the same logical group by setting their ValidationGroup property. Note: This property is added as a new feature of Validation Controls in ASP.NET 2.0 Example: The following example describes a form to be filled up by all the user of a website, divided into two groups, one for login if already user and second is for registeration if new user. Here, we use the validation controls to validate the user input. This is the form in design view:
HTML Source: | User Registration/Login Form |
| New Member? | | ::Registration:: |
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 19
| | First Name | : | | | Last Name | : | | | User Name | : | | | Password | : | | | Confirm Password | : | | | |
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 20
| | | Already Member? | | ::Login:: | | | | Login Name | : | | | Password | : | | | | | |
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 21
Output: If you click Register button to register, it may shows all validation errors in the form message box as summary for Registrtaion Group only.
Now if you click Login button to log in, it may shows all validation errors in the form summary text for Login Group only.
Note:
WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive). Error:
This document explains that how can remove an error in .Net Framework 4.5 when a website is created with an ASP.NET Emty Web Site Template. This error comes when you used any of the Validation control on any other server control because an empty website template doesn’t contain a ScriptResourceMapping for jQuery. Resolve Error
Now add key for Unobtrusive under tag as following code.
Copyright © 2015 - 2016 https://www.facebook.com/rakeshdotnet All Rights Reserved. P a g e | 22
