The RequiredFieldValidator control simply checks to see whether something was entered into the HTML form element. It is a simple validation control, but it is one of the most frequently used. You must have a RequiredFieldValidator control for each form element on which you want to enforce a value-required rule.
ASPX Page Design:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>RequiredFieldValidator</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:TextBox ID=”TextBox1” runat=”server”></asp:TextBox>
<asp:RequiredFieldValidator ID=”RequiredFieldValidator1” runat=”server” Text=”Required!” ControlToValidate=”TextBox1”>
</asp:RequiredFieldValidator>
<br />
<asp:Button ID=”Button1” runat=”server” Text=”Submit”
OnClick=”Button1_Click” />
<br />
<br />
<asp:Label ID=”Label1” runat=”server”></asp:Label>
</div>
</form>
</body>
</html>
C# Code:
<%@ Page Language=”C#” %>
<script runat=”server”>
protected void Button1_Click(Object sender, EventArgs e) {
if (Page.IsValid) {
Label1.Text = “Page is valid!”;
}
}
</script>
Now look at the code from this example. First, nothing is different about the TextBox, Button, or Label controls. They are constructed just as they would be if you were not using any type of form validation. This page does contain a simple RequiredFieldValidator control, however. Several properties of this control are especially notable because you will use them in most of the validation server controls you create.
The first property to look at is the Text property. This property is the value that is shown to the end user via the Web page if the validation fails. In this case, it is a simple Required! string. The second property to look at is the ControlToValidate property. This property is used to make an association between this validation server control and the ASP.NET form element that requires the validation. In this case, the value specifies the only element in the form — the text box.
As you can see from this example, the error message is constructed from an attribute within the <asp:RequiredFieldValidator> control. You can also accomplish this same task by using the Text attribute.
Using the Text attribute
<asp:RequiredFieldValidator ID=”RequiredFieldValidator1” runat=”server” Text=”Required!” ControlToValidate=”TextBox1”> </asp:RequiredFieldValidator>
Placing values between nodes
<asp:RequiredFieldValidator ID=”RequiredFieldValidator1” runat=”server” ControlToValidate=”TextBox1”> Required! </asp:RequiredFieldValidator>
Looking at the Results Generated
Again, the RequiredFieldValidator control uses client-side validation if the browser allows for such an action. You can see the client-side validation for yourself (if your browser allows for it) by right-clicking on the page and selecting View Source from the menu. In the page code, you see the JavaScript shows:
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" &&
ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
… page markup removed for clarity here …
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new
Array(document.getElementById("RequiredFieldValidator1"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] :
document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate = "TextBox1";
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
//]]>
</script>
In the page code, you may also notice some changes to the form elements (the former server controls) that deal with the submission of the form and the associated validation requirements.
Using the InitialValue Property
Another important property when working with the RequireFieldValidator control is the InitialValue property. Sometimes you have form elements that are populated with some default properties (for example, from a data store), and these form elements might present the end user with values that require changes before the form can be submitted to the server.
When using the InitialValue property, you specify to the RequiredFieldValidator control the initial text of the element. The end user is then required to change that text value before he can submit the form.
<asp:TextBox ID=”TextBox1” runat=”server”>My Initial Value</asp:TextBox>
<asp:RequiredFieldValidator ID=”RequiredFieldValidator1” runat=”server” Text=”Please change the value of the textbox!” ControlToValidate=”TextBox1” InitialValue=”My Initial Value”> </asp:RequiredFieldValidator>
In this case, you can see that the InitialValue property contains a value of My Initial Value. When the page is built and run, the text box contains this value as well. The RequiredFieldValidator control requires a change in this value for the page to be considered valid.
Disallowing Blank Entries and Requiring Changes at the Same Time
In the preceding example of the use of the InitialValue property, an interesting problem arises. If you run the associated example, one thing the end user can do to get past the form validation is to submit the page with no value entered in this particular text box. A blank text box does not fire a validation error because the RequiredFieldValidator control is now reconstructed to force the end user only to change the default value of the text box (which he did when he removed the old value). When you reconstruct the RequiredFieldValidator control in this manner, nothing in the validation rule requires that something be entered in the text box — just that the initial value be changed. The possibility exists for the user to completely bypass the form validation process by just removing anything entered in this text box.
A way around this problem exists, however, and it goes back to the earlier discussion about how a form is made up of multiple validation rules — some of which are assigned to the same form element. To both require a change to the initial value of the text box and disallow a blank entry (thereby making the element a required element), you must put an additional RequiredFieldValidator control on the page. This second RequiredFieldValidator control is associated with the same text box as the first RequiredFieldValidator control.
<asp:TextBox ID=”TextBox1” runat=”server”>My Initial Value</asp:TextBox>
<asp:RequiredFieldValidator ID=”RequiredFieldValidator1” runat=”server” Text=”Please change value” ControlToValidate=”TextBox1” InitialValue=”My Initial Value”></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID=”RequiredFieldValidator2” runat=”server” Text=”Do not leave empty” ControlToValidate=”TextBox1”> </asp:RequiredFieldValidator>
In this example, you can see that the text box does indeed have two RequiredFieldValidator controls associated with it. The first, RequiredFieldValidator1, requires a change to the default value of the text box through the use of the InitialValue property. The second RequiredFieldValidator control, RequiredFieldValidator2, simply makes the TextBox1 control a form element that requires a value. You get the behavior you want by applying two validation rules to a single form element.
Validating Drop-Down Lists with the RequiredFieldValidator Control
So far, you have seen a lot of examples of using the RequiredFieldValidator control with a series of text boxes, but you can just as easily use this validation control with other form elements as well.
For example, you can use the RequiredFieldValidator control with an <asp:DropDownList> server control. Suppose that you have a drop-down list that requires the end user to select her profession from a list of items. The first line of the drop-down list includes instructions to the end user about what to select, and you want to make this line a required form element as well.
<asp:DropDownList id=”DropDownList1” runat=”server”>
<asp:ListItem Selected=”True”>Select a profession</asp:ListItem>
<asp:ListItem>Programmer</asp:ListItem>
<asp:ListItem>Lawyer</asp:ListItem>
<asp:ListItem>Doctor</asp:ListItem>
<asp:ListItem>Artist</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator id=”RequiredFieldValidator1” runat=”server” Text=”Please make a selection” ControlToValidate=”DropDownList1” InitialValue=”Select a profession”></asp:RequiredFieldValidator>
Just as when you work with the text box, the RequiredFieldValidator control in this example associates itself with the DropDownList control using the ControlToValidate property. The drop-down list to which the validation control is bound has an initial value — Select a profession. You obviously don’t want your end user to retain that value when she posts the form back to the server. So again, you use the InitialValue property of the RequiredFieldValidator control. The value of this property is assigned to the initial selected value of the drop-down list. This value forces the end user to select one of the provided professions in the drop-down list before she is able to post the form.
I must say your blog is outstanding! I will undoubtedly can be found back again again!