Introduction
ASP.NET is an open-source web framework that works on the server-side to produce dynamic web pages using HTML, CSS, Javascript, TypeScript. You might have seen a red asterisk symbol beside a few questions when filling out a form. You cannot skip these questions and submit the form. Have you ever wondered how the question gets marked as required and gives you an error message if you do not fill it? Let's explore this in our article.
Required Fields Validator
The ASP.NET allows the user to specify a few fields in the forms as required, which indicates that answering those questions is necessary and the user can’t skip these questions. It will display an error message if you leave the field blank. ASP.NET provides a property called RequiredFieldValidator to validate the required fields. Let's explore all the properties that ASP.NET provides us for validation
Property | Description |
AccessKey | This property is used to set keyboard shortcuts for the control. |
BackColor | This property is used to add background-color for the control. |
BorderColor | This property is used to add border-color for the control. |
Font | This property is used for the control text. |
ForeColor | This property is used to add the color for the control text. |
Visible | This property sets the visibility of control on the form. |
Text | This property is used to set the text to be shown for control. |
ErrorMessage | This property is used to set athe n error message that displays when validation fails. |
ToolTip | This property is used to display a text when the mouse is over the control. |
ControlToValidate | This property takes the ID of the control to validate. |
Height | This property sets the height of the control. |
Width | This property sets width of the control. |
Let’s learn the code to implement a required field validator.
<%@ Page AutoEventWireup="true" CodeBehind="RequiredFieldValidator.aspx.cs"
Inherits="asp.netexample.RequiredFieldValidator" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.style1 {
width: 100%;
}
.style2 {
width: 165px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<table class="style1">
<tr>
<td class="style2">Email Id</td>
<td>
<asp:TextBox ID="email" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="mail" runat="server" ControlToValidate="email"
ErrorMessage="Please enter an email(This field is required)" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style2"> </td>
<td>
<br/>
<asp:Button ID="Button1" runat="server" Text="Submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
We took an input box in the above code that considers email as input and declared a RequiredFieldsValidator with the properties like controlToValidate, ErrorMessage, and ForeColor. This displays an input box like shown below.
When the user clicks on submit without input into the field, it displays an error, as shown below.
Learn more about Introduction to C#