In this article I will explain about various validation controls in ASP.NET 2.0.
We need to validate the form before storing the data in our database by using server side validation (at web server) or client side validation (using JavaScript).
Here we are discussing about both Client side validation and Server side validation.
There are six validation controls in ASP.NET Framework.
Those are RequiredFieldValidator, RangeValidator, CompareValidator, RegularExpressionValidator, CustomValidator and ValidationSummary.
Each validation control has its own significance and use. Here I am explaining about advantages and how to use each control individually.
RequiredFieldValidator:
This is the basic validation control in all validation controls and compulsory validate controls for all fields in a form.
For Example you have a registration page where you are asking user to fill a form with his details like Name and Email id…etc. You need to validate user input before submitting, that means you need to check all the fields before submitting. Here RequiredFieldValidator is useful.
<asp:Label ID="lbl_name" runat="Server" Text="Enter yout Name" AssociatedControlID="txt1"></asp:Label> <asp:TextBox ID="txt1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="req1" runat="server" ControlToValidate="txt1" Text="Please Enter your Name"></asp:RequiredFieldValidator><br /> <asp:Label ID="lbl_email" runat="Server" Text="Enter yout Email Id" AssociatedControlID="txt2"></asp:Label> <asp:TextBox ID="txt2" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txt2" Text="Please Enter your Your Email ID" ></asp:RequiredFieldValidator><br /> <asp:Button ID="btn1" runat="Server" Text="Submit" />
From the above code you can observe that RequiredFieldValidator requires two properties, one is ControlToValidate( to which control this validator) and Text(Error message to display).
Here we have two RequiredFieldValidator controls, one for Name(for txt1) another for Email Id(for txt2).
If you user clicks Button before entering any one of the input then corresponding errors message will display
RangeValidator:
This control will help you to check whether particular field value with in the validated range or not.
You have a filed in form where you are asking student to enter his id number. You need to validate that value with the specific range.
<asp:TextBox ID="txt1" runat="Server" ></asp:TextBox> <asp:RequiredFieldValidator ID="req1" runat="server" ControlToValidate="txt1" Text="Please Enter Value"></asp:RequiredFieldValidator> <asp:RangeValidator ID="range1" runat="Server" ControlToValidate="txt1" MaximumValue="100" MinimumValue="50" Type="Integer" Text="Enter Value between 50 and 100"></asp:RangeValidator><br /> <asp:Button ID="btn1" runat="server" Text="Submit" />
You can observe in the above code, here we use the both RequiredFieldValidator and RangeValidator. We can use any number validation controls as we required.
In the above code RangeValidator has different properties. In those ControlToValidate is common for all controls(to which control need to apply this validation), MaximumValue and MinimumValue requires range(i.e., greater value for MaximumValue and lesser value for MinimumValue) and Type(Type of range).
Here we can use type as Date, Double, Currency, String and Integer depending on our requirement. In the above code I use the Integer range.
CompareValidator:
If you want to compare the particular filed value with specific value or you want to check data type of user data you can use CompareValidator control.
For example you have a form where you are asking user to enter his date of birth, but you allow only specified age group, then you can validate that by using CompareValidator control.
<asp:Label ID="lbl1" AssociatedControlID="txt1" Text="Enter your Date Of Birth" runat="Server" ></asp:Label> <asp:TextBox ID="txt1" runat="Server" ></asp:TextBox> <asp:CompareValidator ID="cv1" runat="Server" Text="you are not eligible to register" ControlToValidate="txt1" ValueToCompare="1/1/1985" Operator="LessThan" ></asp:CompareValidator><br /> <asp:Button ID="btn" Text="Submit" runat="Server" />
In the above you have two new properties for CompareValidator validation controls. ValueToCompare is specific value to which you want to compare and Operator is the type of comparision(lessthan, greaterthan …etc).
Even you can compare the type of user input .
<asp:Label ID="lbl1" AssociatedControlID="txt1" Text="Enter your Date Of Birth" runat="Server" ></asp:Label> <asp:TextBox ID="txt1" runat="Server" ></asp:TextBox> <asp:CompareValidator ID="cv1" runat="Server" Text="Invalid Date" ControlToValidate="txt1" type="Date" Operator="DataTypeCheck" ></asp:CompareValidator><br /> <asp:Button ID="btn" Text="Submit" runat="Server" />
By using above code you can ask user to enter Date in correct format.
RegularExpressionValidator:
If you want to validate user input to enter date in some format only, then you can do it using RegularExpressionValidator control.
In your form, if you want to validate the user email address for correct format, you can validate it by using RegularExpressionValidator Control.
<asp:Label ID="lbl1" AssociatedControlID="txt1" Text="Enter your Email" runat="Server" ></asp:Label> <asp:TextBox ID="txt1" runat="Server" ></asp:TextBox> <asp:RequiredFieldValidator ID="req1" runat="server" ControlToValidate="txt1" Text="Please Enter your Email ID"></asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="re1" runat="Server" ControlToValidate="txt1" ValidationExpression="\w+\w*\@\w+\w+\w*\.(com|edu|org|gov|co.in|net)" Text="Please Enter valid Email" ></asp:RegularExpressionValidator><br /> <asp:Button ID="btn" Text="Submit" runat="Server" />
ValidationExpression property of RegularExpressionValidator control will allows you give your own expression. Here I gave expression for validating user Email.
CustomValidator:
If none of the above validation controls useful for your validation, you can still validate user input with your own validation functionality by using CustomValidator control.
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function validate(source, args) { if(args.Value.length > 10) args.IsValid = false; else args.IsValid = true; } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="lbl1" AssociatedControlID="txt1" runat="Server" Text="Enter your feedback"></asp:Label> <asp:TextBox TextMode="MultiLine" ID="txt1" runat="Server" ></asp:TextBox> <asp:CustomValidator ID="cc1" runat="Server" ControlToValidate="txt1" Text="Feedback should be less than 10 characters" ClientValidationFunction="validate"></asp:CustomValidator><br /> <asp:Button ID="btn1" Text="Submit" runat="Server" /> </div> </form> </body> </html>
In the above code you can observe that for CustomValidator control there is property called ClientValidationFunction, where you can assign name of the javascript function.
Even you can assign server side function , by assigning name of the function to OnServerValidate property of CustomValidator control.
In the above code, we are asking the user to enter feedback and we restrict the feed back to the only 10 characters.
ValidationSummary:
The ValidationSummary control enables you to display error messages of all validation controls at one place.
If you want to display all error messages in the top of the form, you can display by using ValidationSummary control by just placing ValidationSummary control.
<asp:ValidationSummary ShowMessageBox="true" DisplayMode="BulletList" ID="vs1" runat="server" /><br /> <asp:Label ID="lbl_name" runat="Server" Text="Enter yout Name" AssociatedControlID="txt1"></asp:Label> <asp:TextBox ID="txt1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="req1" runat="server" ControlToValidate="txt1" ErrorMessage="Please Enter your Name" Text="Please Enter your Name" ></asp:RequiredFieldValidator><br /> <asp:Label ID="lbl_email" runat="Server" Text="Enter yout Email Id" AssociatedControlID="txt2"></asp:Label> <asp:TextBox ID="txt2" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txt2" ErrorMessage="Please Enter your Your Email ID" Text="Please Enter your Your Email ID" ></asp:RequiredFieldValidator><br /> <asp:Button ID="btn1" runat="Server" Text="Submit" />
To display all error messages at one place by using ValidationSummary control, you need to assign message to the ErrorMessage property of each validation control. Difference b/w ErrorMessage and Text of a validation control is that ErrorMessage will appears in the ValidationSummary control and Text will appear in the body of the page.
In the above code you are displaying all Error messages at top of the form.
If you want to display Error messages in the form of pop up box, you can display by assigning ShowMessageBox property of ValidationSummary control to true.
You can read Deployement of Asp.Net website at Deploy of Asp.Net website.