RequiredFieldValidator Control in ASP.NET

ASP.NET RequiredFieldValidator

Data integrity is one of the first principles of web applications, and user input validation is a user's first interaction with a web application. If user input fails, the application will not work. To ensure data integrity, we use validation controls in ASP.NET, and one of the first validation controls you must learn is the RequiredFieldValidation control.

In ASP.NET, the RequiredFieldValidator control ensures that a user has entered a value into an input control on a web form. If the user does not enter a value in a required field, there will be an error message.

In ASP.NET, the RequiredFieldValidator control does not have any methods. Its validation logic is automatically triggered when the page is submitted, either by clicking a button or by pressing the Enter key in an input control.

The RequiredFieldValidator control is designed to work with input controls that accept text input, such as textboxes and dropdown lists. When the page is submitted, the RequiredFieldValidator control checks whether the associated input control has a value. If the input control is empty, the RequiredFieldValidator control sets its IsValid property to false and displays the error message specified in the ErrorMessage property.

The RequiredFieldValidator control can be customized using its properties to control the behavior and appearance of the error message and to specify which input control to validate. By default, the RequiredFieldValidator control uses client-side validation using JavaScript to validate the input control before the form is submitted. If client-side validation is not possible or is disabled, the validation logic will be performed on the server-side when the page is submitted. 

ASP.NET RequiredFieldValidator Properties

Here are the properties of the RequiredFieldValidator control:

1. ControlToValidate: This property specifies the ID of the input control that will be validated. The ControlToValidate property must be set to a valid input control on the same page.
2. ErrorMessage: This property specifies the error message to be displayed if the validation fails.
3. Display: This property specifies how the error message will be displayed. The available options are Static, Dynamic, and None. If set to Static, the error message will be displayed as text on the web form. If set to Dynamic, the error message will be displayed in a JavaScript popup window. If set to None, the error message will not be displayed.
4. EnableClientScript: This property specifies whether client-side script validation should be enabled. If set to true, the validation will be performed on the client-side using JavaScript. If set to false, the validation will be performed on the server-side.
5. Text: This property specifies the text to display as the validation error message.
6. ValidationGroup: This property specifies the name of the validation group to which the validation control belongs. Controls that have the same validation group name will be validated together.
7. SetFocusOnError: This property specifies whether the input control should receive focus if the validation fails. If set to true, the focus will be set to the input control. If set to false, the focus will not be set to the input control.
8. CssClass: This property specifies the name of the CSS class to apply to the error message.
9. ForeColor: This property specifies the color of the error message text.

These properties can be used to customize the behavior and appearance of the RequiredFieldValidator control and to tailor it to the specific validation requirements of your web form.

Implement ASP.NET RequiredFieldValidator in ASP.NET

Let's implement ASP.NET RequiredFiledValidator in ASP.NET app. In this app, we will create a simple login web form that will take a user name and a password as two input fields. For a successful login, both fields are required.

The RequiredFieldValidator /> is used to create a RequiredFieldValidator control in ASP.NET. The first thing we do is, place a RequiredFieldValidator control on the web form.

<asp:RequiredFieldValidator ID="reqName" ControlToValidate="txtName" ValidationGroup="LoginFrame"
 runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>  

As you can see that the ControlToValidate and ValidationGroup properties are also set.

Now, we want to validate two TextBox controls for the user name and the password. For that, we set the ValidationGroup property to the ValidationGroup property value of the RequiredFiledValidator control.

 <asp:TextBox ID="txtName" ValidationGroup="LoginFrame" runat="server"></asp:TextBox> 
<asp:TextBox ID="txt" runat="server" ValidationGroup="LoginFrame"></asp:TextBox> 

This task is quite simple because, in the case of a login form, we want to perform validation against the two required fields (user name and password). In the default case, whenever there is a RequiredFieldValidator inside a page and when the button is clicked, it will validate all the controls falling inside that page. Still, sometimes there exists a necessity for two or more panels, and each one should be independently validated when the respective button within that panel is clicked. To do that, we have to register the RequiredFieldValidator against the group of controls falling inside that particular panel.

Let's say we have a login form and the following with a corresponding forgot password table.

Only the user name and password fields should be validated when clicking the Login button. Whenever the Get Password button is clicked, then only the UserName field should be validated, which is inside the Get Password panel. For doing such things, we can use a ValidationGroup property of RequiredFieldValidator.

The following is the source code for that:

<%@ 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></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
         <p id="panel1">  
            <table>  
                <tr>  
                    <td>User Name:</td>  
                    <td>  
                        <asp:TextBox ID="txtName" ValidationGroup="LoginFrame" runat="server"></asp:TextBox>  
                    </td>  
                    <td>  
                        <asp:RequiredFieldValidator ID="reqName" ControlToValidate="txtName" ValidationGroup="LoginFrame" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>  
                    </td>  
                </tr>  
                <tr>  
                    <td>word:</td>  
                    <td>  
                        <asp:TextBox ID="txt" runat="server" ValidationGroup="LoginFrame"></asp:TextBox>  
                    </td>  
                    <td>  
                        <asp:RequiredFieldValidator ID="reqword" ControlToValidate="txt" ValidationGroup="LoginFrame" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>  
                     </td>  
                </tr>  
                <tr>  
                    <td colspan="2" align="right">  
                        <asp:Button ID="btnSubmit" runat="server" Text="Log In" ValidationGroup="LoginFrame" />  
                    </td>  
                </tr>  
            </table>  
         </p>  
         <p>  
             Incase you forgot your word...  
         </p>  
         <p id="panel2">  
                <table>  
                    <tr>  
                         <td>User Name:</td>  
                        <td>  
                            <asp:TextBox ID="txtUserName" ValidationGroup="ForgotwordFrame" runat="server"></asp:TextBox>  
                        </td>  
                        <td>  
                            <asp:RequiredFieldValidator ID="reqUserName" ControlToValidate="txtUserName" ValidationGroup="ForgotwordFrame" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>  
                        </td>  
                    </tr>  
                    <tr>  
                        <td>  
                            <asp:Button ID="btnGetword" runat="server" Text="Get word" ValidationGroup="ForgotwordFrame" />  
                        </td>  
                    </tr>  
                </table>  
         </p>  
    </div>  
    </form>  
</body>  
</html>

So in the above example, we have created two validation groups; one for panel1 and the second for panel2, with the names LoginFrame and ForgotwordFrame. The controls inside panel 1 all have the ValidationGroup property set to LoginFrame, and for the 2nd Panel, all controls have the ValidationGroup Property set to ForgotwordFrame. In this way, we can reduce the overhead of writing complex JavaScript code and use built-in Validation Controls.

If you click the Log In button, the following is the output. See only the login Frame controls being validated.

If you click the Getword button, only the controls inside the forgotten word frame are validated.

Summary

This article explained the RequiredFieldValidation control in ASP.NET and how to use it in your ASP.NET app to validate user input and required fields. Download the attached code to learn more.