chapter 8 - validation and rich controls

Validation Controls & Rich Controls

Main Menu 1 of 45



Main Menu 2 of 45

Objective

At the end of this chapter, you will be able to

• Understand different types of validation controls.

• You’ll be able to create web forms using these validation

controls.

• Also you will be able to use two new controls provided as

rich controls.


Main Menu 3 of 45

Validation Controls

• Features

• Validation Control Base Class

Types of Validation Controls in VB.NET

• RequiredFieldValidator

• RegularExpressionValidator

• RangeValidator

• CompareValidator

• CustomValidator

• ValidationSummary

Scope


Main Menu 4 of 45

Rich Controls

• AdRotator Control

• Calendar Control

Scope


Main Menu 5 of 45

Validation means checking the input of the user and

if his input is correct, the user is validated.

Validation controls are provided to allow you to

• check for a required field,

• to test against a specific value or pattern of characters,

• to verify that a value lies within a range, and so on.

Validation controls provide you with a way to check

user input in Web or HTML server controls.

Validation Controls


Main Menu 6 of 45

All the features of the validation controls are same

as that of the other Web Server controls

In addition it generates the client side validation

code for Internet explorer 5 and above.

This code uses DHTML to display the content of the

validation control dynamically.

It also prevents the page to be submitted if the

validation fails.

It also protects against Spoofed values.

Features


Main Menu 7 of 45

Even if validation controls are doing client side

validation, they always perform the same validations

on the server also.

So we get the best of both worlds automatically in

VB.NET web forms.

The client side validation can be turned off if not

required.

Features


Main Menu 8 of 45

Validation Controls are provided in the following

namespace: -

System.Web.UI.WebControl

All the Validation Controls inherit from the base

class BaseValidator which is a part of the class

library

System.Web.UI.WebControl.BaseValidator .

This gives us a number of properties which are

common to all the Validation Controls.

Validation Control Base Class


Main Menu 9 of 45

Types of Validation Controls


Main Menu 10 of 45

The RequiredFieldValidator server control ensures

that the user does not skip to any part of the form.

If the user inputs any value into the field identified

by ControlToValidate, it is valid.

If all of the fields in the page are valid, the page is

valid.

This validator ensures that user has filled up the

complete form.

RequiredFieldValidator Control


Main Menu 11 of 45

Let’s try this small example.

Design the form with a label, a textbox and a button as shown in the output.

Drag the requiredfield validator Control on the form and set the following properties:

• ErrorMessage : Name can’t be blank!!!

• Enable Client Script : True

• ControlToValidate : txtName

In properties of the button make sure that property CausesValidation is set to True.



Main Menu 12 of 45

Save and Run the Project to get the following output :



Main Menu 13 of 45

This control checks if the value of the associated input control matches with the pattern of a regular expression.

This type of validation allows you to check for predictable sequences of characters, such as those in social security numbers, e-mail addresses, telephone numbers, postal codes, phone numbers etc.

RegularExpressionValidator uses two key properties to perform its validation.

• ControlToValidate contains the value to validate.

• ValidationExpression contains the regular expression to match.

RegularExpressionValidator Control


Main Menu 14 of 45

Try this example.

Design the page as shown below



Main Menu 15 of 45

The two RegularExpressionValidation

controls are drawn on the form.

In the first one (For Email), set the following

properties :

• ErrorMessage : Not a valid email address

• ControlToValidate : textbox1 (name of first textbox)

• ValidationExpression : Click on button and select

“Internet Email Address “ option

In the second validation control also set the

following properties :



Main Menu 16 of 45

• ErrorMessage : Please enter a Six digit number

• ControlToValidate : textbox2 (name of second textbox)

• ValidationExpression : Click on button and select “Custom “ option

Write the Regular expression : \d{6}.

Write the following code in the button1_click event If Page.IsValid = True Then

Response.Write("It is a Valid Page!!")

End If

Save and run the project.



Main Menu 17 of 45

Enter the valid values to get the following output:



Main Menu 18 of 45

The RangeValidator server control tests whether an

input value falls within a given range.

RangeValidator uses three key properties to perform

its validation.

• ControlToValidate contains the value to validate.

• MinimumControl and MaximumControl define

the minimum and maximum values of the valid range.

This control supports following types

• String , Integer, Double, Date and Currency

RangeValidator Control


Main Menu 19 of 45

See this example: -

Design the screen with two labels , two text boxes

and one button.

Draw two RangeValidator Controls and set the

following properties

Property Value in First

Validation Control

Value in Second

Validation Control

ControlToValidate Textbox1 Textbox2

Type Integer Date



Main Menu 20 of 45

Save and Run the project, add the values to get the

following output :

Minimum Value 1 1/1/2001

Maximum Value 1000 1/1/2002

ErrorMessage Out of Range

(1- 1000)

Date out of Range

(1/1/2001 To 1/1/2002)



Main Menu 21 of 45



Main Menu 22 of 45

The CompareValidator server control compares

the values of two controls.

CompareValidator uses three key properties to

perform its validation.

• ControlToValidate and ControlToCompare

contain the values to compare.

• Operator defines the type of comparison to perform, for

example, Equal or Not Equal.

CompareValidator Control


Main Menu 23 of 45

Try the following example:

Design a Screen with two labels, two text boxes and

one button.

In the CompareVlidator Control set the

following properties

Property Value

ControlToCompare Textbox1

ControlToValidate Textbox2

ErrorMessage Strings Do Not Match



Main Menu 24 of 45

Save and Run the project, enter the values to get the

following output :



Main Menu 25 of 45

The CustomValidator server control helps us to

validate inputs based on our own logic and for which

there are no built in validation controls available.

It is very useful control as it allows us to incorporate

virtually any kind of validation within our web

forms.

Following example which checks for an Even

Number will help you in understanding this control.

CustomValidator Control


Main Menu 26 of 45

Design a Screen with on label, one text box and one

button.

Set the following properties of the CustomValidator

Control.

Property Value

ControlToValidate Textbox1

ErrorMessage Enter an Even Number



Main Menu 27 of 45

Now double click on the CustomValidator Control and trap the ServerValidate event. Write the following code in it.

Private Sub

CustomValidator1_ServerValidate(ByVal

source As

System.Object, ByVal args As

System.Web.UI.WebControls.ServerValidateE

ventArgs) Handles

CustomValidator1.ServerValidate



Main Menu 28 of 45

Dim x As Integer x = args.Value

If (x Mod 2) <> 0 Then args.IsValid =

False

End If

End Sub

Save and Run the project, try different values to get the following output.



Main Menu 29 of 45



Main Menu 30 of 45

Once a user submits his form, the Web Forms framework passes the information to the associated validation control.

The validation controls checks the information and set a property to indicate whether the information is correct or not.

After all validation controls have been processed, the IsValid property on the page is set automatically, if any of the controls shows that a validation check failed, the entire page is set to invalid.

ValidationSummary Control


Main Menu 31 of 45

The ValidationSummary control is displayed when

the IsValid property of the page is false.

The ValidationSummary control collects the values

from the ErrorMessage property of each control.

If the validation is failed all the messages are

displayed on the browser. In this example you can

see this property.

Presently there are two controls in ASP.NET, but in

future there may be more controls in this heading.

Rich Controls


Main Menu 32 of 45

This control is used to display the different images from time to time each time a page is refreshed.

The AdRotator Web Server Control cycles through a number of clickable ad banners, and allows some ads to be weighted more heavily than others.

Ads can either be linked to the control using an XML file with a predefined schema or by creating your own custom logic.

AdRotator is a predefined class in System.Web.UI.WebControls namespace.

AdRotator Control


Main Menu 33 of 45

For working with this control you need to create an

XML file.

Open an ASP.NET Application in the Visual Studio.

Right Click on the Project name and select

AddAdd new Item from the short cut menu.

Select XML file from the list of options. Save this

file as ‘AdList.xml’.

AdRotator Control


Main Menu 34 of 45

Write the following code in the XML file. <Advertisements>

<Ad>

<ImageUrl>Paradise.jpg </ImageUrl>

<NavigateUrl>http://www.tatainfotch.com</Nav

igateUrl>

<AlternateText>Paradise</AlternateText>

<Keyword>Computers</Keyword>

<Impressions>80</Impressions>

</Ad>

<Ad>

AdRotator Control


Main Menu 35 of 45

<ImageUrl>Gold Petals.jpg </ImageUrl>

<NavigateUrl>http://www.tatainfotech.com</N

avigateUrl>

<AlternateText>Gold Petals

</AlternateText>



</Ad>

<Ad><ImageUrl>Snow Trees.jpg </ImageUrl>

<NavigateUrl>http://www.tatainfotech.com

</NavigateUrl><AlternateText>Snow

AdRotator Control


Main Menu 36 of 45

Trees</AlternateText>



</Ad>

</Advertisements>

This file contains advertisement information within

various tags, which are self-explanatory.

Now let’s get back to our Web Form and draw an

AdRotator Control on the web form.

AdRotator Control


Main Menu 37 of 45

Set the AdvertismentFile property and give the name (or URL) of your XML file. This was the first part in which we created XML file.

Include the three image files into your project.

Right click on the project name and select AddExisting item from the short cut menu.

From the options, select image and add three images into your project.

Save and Run the project to see the AdRotator control working!

AdRotator Control


Main Menu 38 of 45

Every time you click on refresh button you will find

the image changing. You can change the image

changing frequency by setting different values in

Impression tag.

AdRotator Control


Main Menu 39 of 45

This control gives great help to programmer for

creating calendar on your web page.

Follow these steps –

Draw a calendar control on the web form, add two

labels and a button as shown.

In the click event of the button write the following

line of code to fetch the date selected by the user.

Save and run the project.

Calendar Control


Main Menu 40 of 45

Now select any date from desired month and year

and click on the Fetch Date Button. Output will be

as follows:

Calendar Control


Main Menu 41 of 45

PROPERTIES

• You can modify the appearance of the calendar to make it

more attractive by setting the numerous self explanatory

properties available.

EVENTS

• You can control the contents and formatting of a date cell.

• It is created by providing code, in the event handler for

various events.

Calendar Control


Main Menu 42 of 45

Key points covered in this chapter are:

• The Validation Controls and the Rich controls are a part of the Set of controls provided by VB.NET

• Validation controls are used to validate the user input.

• These controls can perform a variety of validations. There are different types of validation controls for different types of validations.

• RequiredFieldValidator Control is used to check if the user left a blank entry.

• RangeValidator is used to check between ranges of integers, dates, strings etc.

Summary


Main Menu 43 of 45

• RegularExpressionValidator is used to validate

against regular expressions that can be built for e-mails,

phone numbers etc.

• CompareValidator control is used to compare the

two values in the input boxes.

• CustomValidator is used to provide any kind of

validation logic which is not already available already.

• SummaryValidator is used for giving all the error

messages of all the validation controls in the form at one

place.

• There are two kinds of Rich Controls available now.

Summary


Main Menu 44 of 45

• AdRotator is used to display different advertisements

each time the page is refreshed.

• Calendar control is used to display the calendar on the

web page and to fetch the date selected by the user.

Summary


Main Menu 45 of 45

Fill in the blanks

1. _________ Type of file is used to give the list of

advertisements in the AdRotator Control.

2. ____________ is the base class of all Validation

Controls.

3. ____________ is the base class of all Rich Controls.

4. The namespace for managed the Validation Controls is

__________.

5. _______, _______, _______, _______, ______ and

________ are six types of Validation Controls available.

Self Assessment

chapter 8 - validation and rich controls

Documents