Introduction to ASP.Net CompareValidator

CompareValidator server control is a control used to compare user inputs on the web page with a constant value or another user input. It allows the application developer to enforce a validation policy on the web page and prevent posting the form data to the server unless the validation check has passed. Why did I use the term server control? Well, because like all other server controls, ASP.NET provides its own tag for the CompareValidator control which is run at the server and the generated HTML code is returned as a response to the browser. So, thinking from an HTML perspective, the CompareValidator control generates the HTML span tag, which is hidden by default and displays an error message when the validation fails.

ASP.NET Training (8 Courses, 19 Projects)
9 Online Courses | 19 Hands-on Projects | 120+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (21 ratings)

View Course

Syntax:

The CompareValidator control can be coded using ASP.NET provided tags or dragged and dropped using Visual Studio IDE. The drag and drop feature ultimately generates the same code.

The syntax of ASP.NET CompareValidator in its simplest form is:

<asp:CompareValidator
ID="CompareValidatorId" runat="server"
ControlToCompare="ComparerControlId"
ControlToValidate="TargetControlId"
ErrorMessage="ErrorMessage">
</asp:CompareValidator>

The above mentioned are the basic required properties of CompareValidator control. Let’s understand what each property signifies:

ID: A unique id of the CompareValidator control.
ControlToCompare: The id of the control whose value would be used as the comparator. An optional property in case the comparator is a constant value and not a user input.
ControlToValidate: The id of the control whose value would be compared. A mandatory property.
ErrorMessage: The message to be displayed when validation fails.

Behind the Scenes

So, how does the CompareValidator mechanism work? When the ASP.NET engine encounters the control, it adds a task in the checklist before posting the form to the server. The validation is triggered whenever the focus is removed from either the control to validate or the control to compare. If the validation fails, an error message is displayed. The validation check has to pass in order to post the form data to the server.

Properties of ASP.Net CompareValidator

The ASP.NET CompareValidator control comes with certain pre-defined properties. These properties are converted to attributes in the native HTML code. They help define additional behavior for the CompareValidator control. Let’s discuss some of the frequently used ones in detail:

1. BackColor, ForeColor

This property gets or sets the background and the foreground color of the control.

<asp:CompareValidator ID="myCompareValidator" ControlToCompare="TextBox_1" ControlToValidate="TextBox_2" ErrorMessage="Error" BackColor="DarkBlue" ForeColor="White" runat="server"> </asp:CompareValidator>

2. BorderColor, BorderStyle and BorderWidth

These properties get or set the border styling for the control.

<asp:CompareValidator ID="myCompareValidator" ControlToCompare="TextBox_1" ControlToValidate="TextBox_2" ErrorMessage="Error" BorderWidth="5" BorderColor="Blue" BorderStyle="dashed" runat="server"> </asp:CompareValidator>

3. CssClass

This property gets or sets the CSS class to be applied to the control.

<asp:CompareValidator ID="myCompareValidator" ControlToCompare="TextBox_1" ControlToValidate="TextBox_2" ErrorMessage="Error" CssClass="txtBxClass" runat="server"> </asp:CompareValidator>

4. Enabled

This property gets or sets the value indicating whether the control is enabled or disabled. The default value is true.

<asp:CompareValidator ID="myCompareValidator" ControlToCompare="TextBox_1" ControlToValidate="TextBox_2" ErrorMessage="Error" Enabled="false" runat="server"> </asp:CompareValidator>

5. Font

This property gets or sets the font of the text to be displayed in the control. There are plenty of styles and options such as bold, italics, underline, strikeout, etc.

6. Height, Width

These properties get or set the height and width of the control in the number of pixels.

<asp:CompareValidator ID="myCompareValidator" ControlToCompare="TextBox_1" ControlToValidate="TextBox_2" ErrorMessage="Error" Height="100" Width="500" runat="server"> </asp:CompareValidator>

7. ID

This property gets or sets the unique identifier attribute to the control.

<asp:CompareValidator ID="myCompareValidator" ControlToCompare="TextBox_1" ControlToValidate="TextBox_2" ErrorMessage="Error" runat="server"> </asp:CompareValidator>

8. Type

This property gets or sets the data type in which the values are converted before being compared.

<asp:CompareValidator ID="myCompareValidator" ControlToCompare="TextBox_1" ControlToValidate="TextBox_2" ErrorMessage="Error" Type="string" runat="server"> </asp:CompareValidator>

9. Visible

This property determines whether the control will be displayed on the UI or hidden. The default is true.

<asp:CompareValidator ID="myCompareValidator" ControlToCompare="TextBox_1" ControlToValidate="TextBox_2" ErrorMessage="Error" Visible="false" runat="server"> </asp:CompareValidator>

Examples of ASP.Net CompareValidator

Let us create a CompareValidator sample application in a step by step manner.

Step 1: Create a new ASP.NET WebApplication project. This will create a shell template with a working application with a Default.aspx and Default.aspx.cs page. The .cs page is the code behind page for the .aspx page.

Step 2: Go to the Default.aspx file and remove the contents of the shell template to look like below.

Step 3: In the Toolbox pane of Visual Studio IDE, you would notice a set of Validation Controls ready to drag and drop in your project. Find the CompareValidator control and drag it in the Default.aspx page.

Step 4: Once you drop the CompareValidator control, you would notice an auto-generated ASP.NET CompareValidator tag in your Default.aspx file. Modify the code to look like below.

Alternatively, you can skip the drag and drop part and write the above code yourself.

<asp:CompareValidator ID="pass_repass_compare" runat="server"
ControlToCompare="pass_txt"
ControlToValidate="repass_txt"
Type="String"
ForeColor="DarkRed"
ErrorMessage="Passwords do not match!">
</asp:CompareValidator>

Step 5: Copy the below code in your Default.aspx file.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SampleWebApplication._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<br /><br />
<asp:Label ID="pass_lbl" runat="server" Text="Label">Enter Password</asp:Label>
<asp:TextBox ID="pass_txt" TextMode="Password" runat="server"></asp:TextBox>
<br /><br />
<asp:Label ID="repass_lbl" runat="server" Text="Label">Re-enter Password</asp:Label>
<asp:TextBox ID="repass_txt" TextMode="Password" runat="server"></asp:TextBox>
<br /><br />
<asp:Label ID="msg" runat="server" Text=""></asp:Label>
<br /><br />
<asp:CompareValidator ID="pass_repass_compare" runat="server"
ControlToCompare="pass_txt"
ControlToValidate="repass_txt"
Type="String"
ForeColor="DarkRed"
ErrorMessage="Passwords do not match!">
</asp:CompareValidator>
<br /><br />
<asp:Button ID="Validate_btn" runat="server" OnClick="Validate_btn_Click" Text="Validate" />
</asp:Content>

Step 6: Copy the below code in your Default.aspx.cs file.

using System;
using System.Web.UI;
namespace SampleWebApplication
{
public partial class _Default : Page
{
protected void Validate_btn_Click(object sender, EventArgs e)
{
if (Page.IsValid) {
msg.Text = "Account created successfully.";
}
}
}
}

Step 7: Run the application. Below is the output of your code. It has two text boxes and a validation control to check whether the values of both the text boxes match or not.

The code-behind the file has a button click function to the Validate button. This method is called only when the CompareValidator results in a pass.

The above is the landing page of your application. Enter a password and then re-type the password. If both the passwords do not match, an error is displayed and no call to the code behind the function is made. This simply means that the data is not posted to the server unless the passwords match.

Popular Course in this category