|
download source code
This article is a follow up to my article
An Introduction to the ASP.NET 2.0 Wizard Control,
which was published a few weeks ago. It seems that many of you are unsure how to use the
ASP.NET validation controls in conjunction with the new ASP.NET 2.0 Wizard control.
The process is largely the same as performing validation of any other form, but
due to the large number of questions I've received, I figured it wouldn't hurt to
do a quick walk through.
I'll be using the two samples from the previous article as a starting point. If you want to follow
along and don't already have the sample pages, you can download a zip file containing them both
from here (2.7 KB).
Once again, I'm going to be building my samples using Microsoft Visual Web Developer 2005 Express Edition.
While you certainly don't need VWD 2005 in order to use the code from this article, if you are interested
in getting a copy, it's available as a free download from the
Visual Studio Express web site.
Adding Validation to the Basic Wizard Sample
-
Load Visual Web Developer and open the "Wizard" project you created last time.
If you don't have one, simply create a new "ASP.NET Web Site" project, name it
"Wizard" and copy the files from the zip file mentioned above into it.
-
Since I'm going to be using the same two files we used last time, I'm going to create a new
copy of each so that you can keep the originals for reference.
Create a new copy of "wizard_basic.aspx" and name it "wizard_basic_validation.aspx".
While you're at it you might as well do the advanced version as well.
For that one, copy "wizard_advanced.aspx" to "wizard_advanced_validation.aspx".
Your project should now look something like the image above. The two new files are the ones highlighted.
-
Open the new file "wizard_basic_validation.aspx" in Design view. The design pane
should look something like this:
-
I'm now going to add a ValidationSummary control to the page directly above the
existing Wizard Control. You can find the ValidationSummary control in the Validation
section of the Visual Studio toolbox.
Change the control name to "validSummary" and
enter the following as the control's HeaderText property:
"This WizardStep did not validate, please address the following issues:"
The resulting page should look like this:
-
The next step is to add the actual validation controls to the Wizard, associate them with the
form fields they will be validating, and set any validation rules we need to in order to get
them working the way we want them to.
For the first Wizard Step, the only validation we're going to do is to be sure that the user enters
something for their name. For this I'm going to use the RequiredFieldValidator control with you can find on the
same toolbox tab as the ValidationSummary control.
With the first Wizard Step showing, drag and drop a RequiredFieldValidator control onto the page
directly to the right of the TextBox where the user should enter their name. You can play with the exact
placement of the control later once we get everything working, but for now we need to set
some of the control's properties. First off, change the control's ID to "validName" and
set the ControlToValidate property to "txtName" (the name of our TextBox control).
Next set the Text property to "*" and the ErrorMessage to "Please enter your name."
Finally I set some optional properties that simply make the form look a little better and make it a little easier to use
(Display = "Dynamic" and SetFocusOnError = "True")
The page in design mode should now look like this:
-
When viewed in a browser the page looks the same as it did before. The only time anything changes is when
the user inputs data that doesn't pass our validation criteria -- in our case, leaves the name field blank.
When that happens, the user gets a message that looks like the image below and the wizard won't go on to
the next step until the user resolves the validation issue.
-
Back in Visual Web Developer, it's time to finish adding validation to the page by adding both a
RequiredFieldValidator control and a RegularExpressionValidator control to the e-mail TextBox in the
second Wizard Step.
First we need to switch to the seconds Wizard Step. Do that by clicking on the "Step 2"
in the Wizard control.
I'm going to start with the RequiredFieldValidator since it's almost identical to the one we just did
to validate the Name TextBox.
Once again we're going to drag and drop a RequiredFieldValidator control onto the page
directly to the right of the TextBox. Once the validator is in place, select it and set
the following properties to the corresponding values:
| Property |
Value |
| ID | "validEmailRequired" |
| ControlToValidate | "txtEmail" |
| Text | "*" |
| ErrorMessage | "Please enter your e-mail address." |
| Display | "Dynamic" |
| SetFocusOnError | "True" |
Then we're going to do the same with a RegularExpressionValidator control.
Drop it right next to the control you just added and set its properties to the following:
| Property |
Value |
| ID | "validEmailRegEx" |
| ControlToValidate | "txtEmail" |
| ValidationExpression | "\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" |
| Text | "*" |
| ErrorMessage | "Please enter a valid e-mail address." |
| Display | "Dynamic" |
| SetFocusOnError | "True" |
And before I get all sorts of email -- I'm not a Regular Expression guru. The email validation above
was generated by Visual Web Developer.
Your page will now look something like this:
-
When you're finished with the validators for Step 2, be sure to switch the wizard back to Step 1,
save the file and give it a whirl.
-
As before, if all entries pass validation the user won't see anything new.
But, if they happen to enter an invalid email address, they'll be greeted by the following
message asking them to please check their entries.
Adding Validation to the Advanced Wizard Sample
Having covered all the basics in the basic sample, I'm going to skip doing a step-by-step write up
of what you need to do to add validation the advanced sample. That being said, rest assured, I did
actually do it and for those of you too lazy to actually look in the zip file for the code, here's
a quick screen shot to prove it.
But seriously, the concepts are all the same and everything is just as simple. The only difference
is that because the sample has more data to validate, we end up with a lot more validation controls.
Conclusion
I hope this has helped clear up any confusion and illustrate just how easy it is to use the ASP.NET
validation controls in conjunction with the ASP.NET 2.0 Wizard control in order to create fabulous multi-page
web forms that actually validate their data before passing it on to its final destination.
|
