ASP.Net - Validation Controls

Hello

Post contents :

• Introduction
• Validation Controls

• RequiredFieldValidator - verify the user will insert any input

• CompareValidator - compare vs a value

• RangeValidator -  compare vs a range of values

• RegularExpressionValidator - check vs regular expression

• ValidationSummary - display all validation error in the page

• CustomeValidator - check vs your own validation method (full flexibility)

Introduction


Validation process checks that the user input (Text,Checked,..) is correct otherwise error is issued. E.g. in case a number should be entered  : validation check that the user will not be able to insert a letter, or to be more accurate that this letter will not be sent to the server and an error will be issued.

Validation is performed in general on the client (preferred) in case it support JavaScript otherwise it is done on the server.


ASP.Net provides few controls to perform input validation.


Validation Controls

There are six validation controls in ASP.Net

• RequiredFieldValidator - verify the user will insert any input
• CompareValidator - compare vs a value
• RangeValidator -  compare vs a range of values
• RegularExpressionValidator - check vs regular expression
• ValidationSummary - display all validation error in the page
• CustomeValidator - check vs your own validation method (full flexibility)

It is important to note that :

• Validation take place when user submit info to the server e.g. when a button is clicked or in any other way which cause POSTBACK  (not on Page_Load).
• Page has a property IsValid which indicate if validation is ok for this page. It is based on the validation controls in this page. IsValid is false if at least one validator has IsValid=false otherwise it is true
• It is possible to use  Response.Redirect("some url") in conjunction with Page.IsValid to indicate success validation

RequiredFieldValidator 
Validate that a field is not empty

Important properties :

• ControlToValidate - id of control that should be validated
• ErrorMessage - text to display in  ValidationSummary in case validation failed. This will appears for this control in case of error if Text property is empty
• Text - text to display in case validation failed
• EnableClientScript - whether to perform validation in client side if possible (default true)
• IsValid - whether validation is ok or not
• Display :

• None - no error display, only in ValidationSummary 
• Static - space required for error is occupied anyway
• Dynamic - space required for error is occupied only when error occurs  

Sample 1
RequiredFieldValidator - sample 1.zip

The sample is a web site with info the user has to fill :

• Name - required
• ID - required
• E-Mail - optional
• Cell Phone - optional

Error should be issued in case Name or ID are not entered

Redirect to "thank you" page in case validation is not ok. 

View in browser and click on Submit :

Use breakpoint inside the Submit handler. When does the breakpoint is hit ? in case validation is ok or not ok ? why ? where is validation done in client or server ?

In case validation is OK use thank you page :

• use Page.IsValid  (Validation will not be OK if at least one validator has failed.)
• use Response.Redirect("Url name")

CompareValidator 
Validate the input against another value for a given operator

Important properties :

• ControlToCompare - compare this control with the value entered by the user. E.g. in case the input is entered viea TextBox you can compare the Text property with another TextBox which is the ControlToCompare.
• ValueToCompare - compare this value with the value entered by the user
• Operator :

• Equal

• GreaterThan

• GreaterThanEqual

• LessThan

• LessThanEqual

• NotEqual

• DataTypeCheck - validate type is correct (Type should also be defined)

• Same as in RequiredFieldValidator  

• ControlToValidate 
• ErrorMessage 
• Text  
•  EnableClientScript 
•  Display 

Remark

• validation will be ok in case the value to compare is empty , use also RequiredFieldValidator in this case (see )

Sample 2

CompareValidator_sample 2.zip

The sample is a web site with info the user has to fill  - guess day of birth.

Handle empty field (use RequiredFieldValidator, Display = dynamic)

Handle wrong value (use CompareValidator,Display = dynamic)

Handle correct value  (use Page.IsValid and Response.Redirect)

Use breakpoint inside the "Guess my day of birth" handler. When does the breakpoint is hit ? in case validation is ok or not ok ? why ? where is validation done in client or server ?




RangeValidator 
Validate the input against a range


Important properties :

• MinimumValue - allowed input minimal value
• MaximumValue - allowed input maximal value
• Type -  Specifies the data type of the value to check. The types are:
  • Currency
  • Date
  • Double
  • Integer
  • String

• Same as in RequiredFieldValidator  

• ControlToValidate 
• ErrorMessage 
• Text  
•  EnableClientScript 
•  Display 

Remark

• validation will be ok in case the value to compare is empty , use also RequiredFieldValidator in this case (see )

Sample 3
RangeValidator_sample 3.zip
The sample is a web site with info the user has to fill  - height.
Common height is defined between 120-220

Issue a note in case the value is in not in range

 Redirect the page in case height is ok  (120-220)

RegularExpressionValidator 
Validate that the input matches a regular expression

Important properties :

• ValidationExpression

• Same as in RequiredFieldValidator  

• ControlToValidate 
• ErrorMessage 
• Text  
•  EnableClientScript 
•  Display 

Remark

• validation will be ok in case the value to compare is empty , use also RequiredFieldValidator in this case (see )

You can choose via ValidationExpression regular expression from a list :

Sample 4
RegularExpressionValidator sample 4.zip
The sample is a web site with Email that need to be validated.

Non valid case

In case the mail is valid the page is redirected to result in :

Need to handle also empty field.

ValidationSummary
Display error messages from different validation controls (provided that their ErrorMessage property is not empty)


Important properties :

• ShowSummary - define whether the summary control should be visible or not
• ShowMessageBox - defines whether to show errors in message box
• DisplayMode :

• BulletList

• List

• SingleParagraph

Sample 5
 ValidationSummary sample 5.zip

 Click on button 

CustomeValidator
Validate the user input against a custom method.

Important event

• ServerValidate - occurs when server validate e.g. when button is pressed 

Important properties of ServerValidateEventArgs :

• Value - value to be validate
• IsValid - validation result

Important properties of CustomeValidator:

• Same as in RequiredFieldValidator  

• ControlToValidate 
• ErrorMessage 
• Text  
•  EnableClientScript 
•  Display 

Remark

• Validation will be ok in case the value to compare is empty , use also need RequiredFieldValidator in this case ( see)
• The handler of  ServerValidate will NOT be invoked when another validation control like  RequiredFieldValidator is used and it's IsValid is false. This is because the validation of  RequiredFieldValidator is done on the client and when failed no info is sent to the server.

Double click on the control result in :

Sample 6
CustomeValidator_sample 6.zip
Build the following web site :

user name :

• length should be between 1-20 
• only lower case letters are allowed
• issue an error in case rules are violated

password :

• length should be between 5-10
• only upper case letters are allowed
• issue an error in case rules are violated

Redirect to Login Success page in case validation is OK

Example for the case ServerValidate is not called because client validation has failed - User is empty is issued by RequiredFieldValidator which validate on the client

CauseValidation
CauseValidation_sample 7

It is possible to cause validation even if a button is not pressed.

This can be done by setting the following input control properties :

• CauseValidation = true
• AutoPostBack  = true

Then by putting the mouse in the input (e.g. TextBox,RadioButton ...) and typing some thing (even space) then use Enter ot Tab will cause AutoPostBack and validation will be performed

Run to result :

Now put the mouse inside one of the TextBox and hit space, then click Enter or Tab, this cause POSTBAACK which cause validation which result in :

Home Project
Add the following validation to the home project of http://websoftwarenk.blogspot.co.il/2012/08/aspnet-web-form-using-server-control.html :

• Validate "Choose Starting Player"
• Validate "Choose Background" 

• Text should be * and error should be displayed by summary validator

• Validate  x Palyer \ 0 Player TextBox name :

• name is not empty
• name length is 5-20
• name contains only letters and digits
• Text should be * and error should be displayed by summary validator

Nathan

ASP.Net - Web Form using Server Control

Hello

This post covers in different levels the following :

• Server controls categories
• Label
• TextBox
• Button
• Image control
• Image
• CheckBox
• RadioButton
• ListControls
• Panel
• AdRotator
• Calender
• HyperLink
• Table
• PlaceHolder
• Literal
• ImageMap
• SmallHome Project

Server controls are tags that are understood by the server.

Server controls categories :

• Standard : Button, Label,...
• Data :  GridView , ListView
• Validation : RangeValidator
• Navigation : Menu, SiteMapPath, TreeView
• Login : Login  , LoginName
• HTML - same as in HTML e.g. Input, Table....
• advanced :

• Web part 

• AJAX (  Asynchronous JavaScript and XML ) Extension - allow to update part of web page not all of it thus improve performance

• Dynamic Data

• Reporting - reports

Source sample 1 - label
Lets create a web site  - ASP.Net Empty Web Site . make sure Web Location is HTTP and you run Visual Studio "as administrator"

Lets add a web form - default.aspx and put a label in it.

Now lets add text

Run the page using view in browser (or using localhost/<web site name>

What happened :

• an HTTP GET request with the page URL was sent from the browser to the server
• the server got the request , send it for the ASP.Net engine for processing
• the response - HTML file is sent back to the browser

You can view the returned html source via the browser e.g. for chrom it is Tools->View Source.



<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
    <form method="post" action="Label.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
 value="/wEPDwUJOTczNTMyNjI5D2QWAgIDD2QWAgIBDw8WAh4EVGV4
 dAUUNy8yMi8yMDEyIDE6NDE6MjMgUE1kZGRzZ+wB1xyZnb0BtmErYtqt
HQKmhiNCSXSL1nk9lByRpw==" />
</div>
    <div>
        <span id="Label1">7/22/2012 1:41:23 PM</span>
    </div>
    </form>
</body>
</html>

remarks :

• The strange hidden input type is created by ASP.Net. It contains control state (background color, font, ...). This may be used for POSTBACK.
• The asp engine has return HTML - the browser does not know ASP it know HTML so the ASP engine make the translation !!

Maintaining the ViewState

When a form is submitted in classic ASP, all form values are cleared. Suppose you have submitted a form with a lot of information and the server comes back with an error. You will have to go back to the form and correct the information. You click the back button, and what happens.......ALL form values are CLEARED, and you will have to start all over again! The site did not maintain your ViewState.
When a form is submitted in ASP .NET, the form reappears in the browser window together with all form values. How come? This is because ASP .NET maintains your ViewState. The ViewState indicates the status of the page when submitted to the server. The status is defined through a hidden field placed on each page with a <form runat="server"> control. The source could look something like this:

Maintaining the ViewState is the default setting for ASP.NET Web Forms. 

Exercise  1 - Button + Text Box
Write an asp page with button and two text boxes. The button handler switch the text between the text boxes

Source sample 2 - Image control
source_sample_2.zip
Create a web site name WebSite4 with an image and label - This is my phone. Add a tool tip - MyPhone.

Add the image via Add Existing Item.

Set the ImageUrl to the image file name

Note that you can set this via code or the control properties (via GUI).
I have chosen to change the properties so we can see it in the aspx file :

Run via the browser localhost/WebSite4 e.g. in this case

Note that you can control the image size with properties width , height

Source sample 3 - CheckBox and AUTOPOSTBACK

Add a page to the web site and add check box
Click on the check box to create it's handle and put a break point inside;

Run the application via F5 - the break point is not hit !!!

Change the check box property AutoPostBack True and run via F5 , now you can see that the change has reached the server - an HTTP POSTBACK  was done and the handler is served.

remark - one might ask himself why do i need this ? i guess there are scenario when a check box click should be notified but only when you does POSTBACK and not automatically.

Exercise  2  - illustrate further AUTO POST BACK
create a web site with button and check box. click on the check box and put a break point.
run the web site and click the  check box, the breakpoint is not hit (AUTO POSTBACK is false). Now click the button , this generate POSTBACK so now the break point is hit !!

Source sample 4 - Radio button (illustrate the AUTOPOSTBACK issue)
sample4_radioButton
Important Properties :

• Checked
• Text
• Group
• AutoPostBabk

Important Events :

• CheckedChanged

create a web site with label choose a drink and 3 radio button : coffee,tea,water
and Text box choosing one trigger the text into the text box. Only one radio button can be chosen

hint : make sure AutoPostBack is true for all radio buttons

Run to createWebSite4

List controls

• ListBox

• list of item 
• very common - e.g. list of locations 
• allow to choose one or more items from the list 

• DropDownList :

• like listbox but allow to choose ONLY on items from list

• CheckBoxList 

• list of check box
• compact way of handling  check box e.g. one method to trap change in some item

• RadioButtonList

• list of radio buttons
• compact way of handling radio button e.g. one method to trap change in some item

• BulletedList

• display list of bullets
• you can not choose an item

Source sample 5 - ListBox + Binding
Sample 5 ListBox + Binding

important properties :

• SelectedIndex
• SelectedItem
• DataSource
• SelectionMode(Single\Multiple)
• AutoPostBabk
• Items

important methods :

• DataBind

important events

• SelectedIndexChanged

It is possible to use binding with list control .
Need to use IsPostBack.

Remark - note that adding to the list automatically update the GUI (like in WPF)

View this page in browser result in :

Click on the control to create

Put a break point inside ListBox1_SelectedIndexChanged , click F5 and choose USA - breakpoint hit ?
yes ONLY if AUTOPOSTBACK is true.

Add a search button and show population for the selected country :

 ["Israel"] = 7848800;
 ["Jordan"] = 6508271;
 ["USA"] = 311800000;
 ["Germany"] = 81859000;
 ["Syria"] = 22530746;




Run to create :

remark - the result text box TextMode should be MultiLine so it will fit inside the text box control.


Source sample 6 - Panel
sample 6 - Panel
Panel is a container for other controls. It is best use with Visible true\false

Service screen

Production screen

Source sample 7- AdRotator

Sample 7 AdRotator.zip
Display advertisements on your web page.
The Data Source that pop up when you add AdRotator is the source of adds. you can choose None and add later the source

important properties :

• AdvertismentFile - put here the XML file
• XML Ad tags   

• <ImageUrl>  - url of the image , what you see

• <NavigateUrl> -  url of the link, click on the image and this link opens

• <Impressions> - relative importance of this ad 

The XML file :

  
    ICON-STEPS2 (1).png
    http://www.msn.com
    25
  
  
    green-footsteps-ii1-300x295.jpg
    http://www.startvbdotnet.com
    5

remark :

• for some reason strange reason you some time get error "" during debug. run as "view in browser" 
• the ratio of appearance is about 5:1 for msn.com ad (it is not accurate)

enter http://localhost/WebSiteAdRotator/into the browser and click enter. few time you will get one ad and then the other

Remark :

• This work OK for HTTP web location (use view in Browser)
• On FileSystem web location you get an exception "The AdRotator AdRotator1 could not find the AdvertisementFile or the file is invalid."

Source sample 8- Calender
Sample 8 Calender.zip


Calender 

important properties :

•  SelectedDate  

important events

• SelectionChanged 
• DayRender - issued when day cell is created (including postback)

DayRenderEventArgs

important properties :

• Cell
• Day

Write a Web Site with Calander and ListBox.
Every date picked is sent to the list box
Allow the user to add appointment (use DayRender which is forced by postback - use some button for this)

Source sample 9 - HyperLink
This control is actually a link.

Sample 9 HyperLink.zip
important properties :

• ImageUrl - image url
• NavigateUrl - target URL

Unlike LinkButton , HyperLink does not issue POSTBACK when HyperLink is clicked. It will simply request for the URL.

Create a simple web site with HyperLink control , fill ImageUrl  and NavigateUrl

Source sample 10 - Table
Table sample 10.zip

Table important properties

• Rows - collection of TableRow

TableRow important properties

• Cells - collection of TableCells

TableCell  important properties

• Controls - collection of Controls

You can look at this also in this way (table has rows, rows has , .....)

• Table

• Rows

• Cells

• Controls 

code snippet for creating table with button as cell

Create web site as follows :

• The user can enter the number of rows\coulmns
• Create Table button create a table of buttons with the text that identify the button in the table
• handle the case of non valid input (exception)

Remark 

It is possible to use table for layout using 

Then drag and drop controls into the table.

Go back to the sample and use table in this way for layout of insert number of row and col (2x2 table)

Source sample 11 - PlaceHolder

PlaceHolder sample 11

This is only a container for other controls.

Click on the button

Generate POSTBACK e.g. by clicking on the browser address line and the placeholder disappears !. 

Source sample 12 - Literal

This control is similar to label but it can be used inside the HTML title because it is tranlated by the ASP.engine to simple text as sen in view source :

Literal is put inside the HTML title

Run to create

Source sample 13 - ImageMap
ImageMap sample 13.zip

This control has an image , you can divide it logically and perform action when different part are clicked.

important properties :

• ImageURL - url of image
• HotSpots - collection of HotSpot type

• RectangularHotSpot - define rect by (top,left) , (bottom,right)
• CircleHotSpot
• PolygonHotSpot 

• NavigateUrl - property of each hotspot, allows to navigate to e.g. asp page

You can add hot spot via the IDE : click on HotSpot and then click Add and choose mode

Sample control :

Create a Web Site with an image. In case you click on it's upper part you are navigated to one aspx file , in case you click on it's lower part you are naviagted to another apsx. Both aspx allow you to get back to the original aspx.



Run the project :
click on the image upper part

You are navigated to upper.aspx

Click Back to navigate to the main page. Now click on the lower part, you are navigated to lower.aspx

Advanced
Properties :

• HotSpotMode

Small Project Home
Following is a GUI for a small home project
Control used :

• Label
• TextBox
• Image
• Button or ImageButton
• RadioButtonList
• ListBox
• HyperLink
• Table (not must)

HTML Table is used for layout
Player moves and winners are written into the Messages list including date\time

  Nathan