Beginning ASP.NET 4.5.1 in C# and VB Chapter 9 Validation Beginning ASP.NET 4.5.1 in C# and VB Chapter 9

Objectives You will be able to use validation controls on your web pages to validate user inputs automatically.

Validation Controls Validation controls permit declarative validation of user inputs. Specify conditions declaratively rather than writing code to check validity.

Validation Controls Overview RequiredFieldValidator RangeValidator CompareValidator RegularExpressionValidator CustomValidator

Validation Controls Each validation control is bound to a single input control. One input control can have multiple validation controls. Normally an invalid input will prevent the postback from being done. Require user to provide valid inputs before passing them to the server.

CausesValidation Every button has a CausesValidation property. Checked when button is clicked, before page is posted back. If true, validation is performend on all input controls that have validation controls. In the browser. Again on the server. If false, page is posted back without validation.

Why not do validation? Consider a Cancel button. Sometimes we want to be able to do a postback even if some inputs are invalid.

Client-Side Validation ASP.NET transparently provides JavaScript to do validation in the browser. Supported by most modern browsers Chrome Firefox Safari Internet Explorer 5 and later If client-side validation fails, page does not post back. Error information is shown on the page.

Server-Side Validation Even if page passes all validation checks on the browser, inputs will be validated on the server. Hackers can easily bypass client-side validation. Some users may disable JavaScript. Client-side validation is a matter of convenience and performance only. Not security. Server-side code has the ultimate responsibility for ensuring that inputs are valid.

Simple Example Create a new empty ASPX C# website Validation_Demo Add new web form, Default.aspx We will design a page with a TextBox having a range validator. Second TextBox with no validator.

Design the Page Expand the Validation section of the Toolbox. Add a RangeValidator beside the TextBox.

RangeValidator

Display Property Values Static Reserve space on page for the error message even if the control is valid. Dynamic Do not reserve space on page for the error message if the control is valid. Useful when there are mulitple validators for a single control. None Do not display the error message.

Design the Page Add another TextBox with no validator. Just so that we can tab out of the validated input. Add an OK button. btnOK CausesValidation is true by default. Add a label beside the button. lblMessage

The Page in Design View

Add Click Event Handler Double click on the button to add a Click Event Handler.

Page in Source View

Set Breakpoint Set a breakpoint on the Page_Load method. So that we can tell when a postback occurs.

Program Running Enter an invalid number and press tab

Error! Ask google about it

Search Result: Unobtrusive Validation Mode

Search Result: Unobtrusive Validation Mode

Web.config Add Try again.

After User Presses Tab Key Note that the page did not post back.

Server-Side Validation To see how the page will work on a browser that does not support JavaScript set RangeValidator1.EnableClientScript property to false. Try again.

After User Clicks OK Nothing happens when we tab out of the first box. Error message is shown after postback when we click OK.

Server-Side Processing Note that the error message appeared on the page, BUT the click event handler executed even thought the input was invalid. We can prevent the normal click actions if the page is invalid but we have to provide an explicit check.

Server-Side Validity Check protected void btnOK_Click(object sender, EventArgs e) { if (Page.IsValid) lblMessage.Text = "btnOK_Click event handler executed"; } else lblMessage.Text = "Input is invalid"; Try again with invalid input.

Invalid Input

Valid Input

No Input If nothing is entered, the range validation passes. If we want to require input we need another validator. RequiredFieldValidator

Add RequiredFieldValidator

RequiredFieldValidator Properties Try it!

RequiredFieldValidator Click on OK with no inputs.

Validation Summary The validation summary control shows all error messages from the page together in one place. Add a ValidationSummary below the OK button. Modify the error messages to identify the input to which they apply.

Display Options Example: If a validation control’s Text property is set, it will be shown at the position of the validator, and the ErrorMessage will be shown in the Error Summary. Example: Text: "This input is required" ErrorMessage: "First input is required"

RangeValidator

RequiredFieldValidator

Validation Summary Add a ValidationSummary at the bottom of the page.

Validation Summary Try it!

Validation Summary

Summary Only We might want to suppress the error message at the position of the input. Avoid clutter with lots of validated inputs. Set its Display property to None.

Display Property Set To None

Other Display Options If a page has a lot of inputs, we might want to just flag the invalid inputs and put the detailed information in the summary. Example: Flag the input field with an invalid value. Set Text to “*” Set Display back to Static

Flag Invalid Input

Other Display Options

Other Properties of ValidationSummary Border properties DisplayMode HeaderText ShowMessageBox EnableClientScript must be true. ShowSummary Set to false to disable summary

Validation Summary Properties

RangeValidator1

Validation Summary End of Presentation