ICE 08 Part 1: Creating a Page with Validation

1. Create a new web site project called ice8
2. Add a new Default.aspx page
3. In Design view, add one (1) Label, aand change its text to My Groovy Form (or something along those lines)
4. Insert a Table that contains six (6) rows and three (3) columns, with a width of 90%
5. Add one (1) TextBox to each of the six cells in the first leftmost column six (6) TextBoxes
6. Add one (1) Button below the Table
7. Add one more (1) Label below the Button, and make sure to hide it in the Properties (it will only show a message during a successful submission).
8. In the middle column of the Table, add Full Name in the first cell, Email Address in the second cell, Phone Number in the third cell, City in the fourth cell, State in the fifth cell, and Zipcode in the sixth cell.
9. In the right column of the Table, from the Validation section of the Toolbox, drag-and-drop a RequiredFieldValidator to the first cell, a RegularExpressionValidator to the second cell, a RegularExpressionValidator to the third cell, a RequiredFieldValidatorto the fourth cell, a RequiredFieldValidator to the fifth cell, and a RegularExpressionValidator to the sixth cell.
10. Click on the first a RequiredFieldValidator in the first cell to highlight it, then in the Properties panel point the ControltoValidate value to TextBox1 (or whatever you named your first TextBox), and add a pertinent error message,
11. Do the same for your validators for City and State, making sure to point them to the correct TextBox names, and add pertinent error messages.
12. Add a regular expression pattern to check for in the Email Address RegularExpressionValidator that will explicitly look for some text, then an @ followed by some more text, then a dot . followed by some more text, and give an appropriate error message when not found. Don't forget to set the value for the ControlToValidate property.
13. Add a regular expression pattern to check for in the Phone Number RegularExpressionValidator that will explicitly look for three numbers followed by a dash, then three more numbers, followed by another dash, then four more numbers and give an appropriate error message when not found. Don't forget to set the value for the ControlToValidate property.
14. Add a regular expression pattern to check for in the Zipcode RegularExpressionValidator that will explicitly look for a five digit number and give an appropriate error message when not found. Don't forget to set the value for the ControlToValidate property.
15. Add functionality to the Button that will check the validity of the form when submitted, and display a "Form Successfully Submitted!" message in the bottom Label when there are no errors.
16. Keep testing your form until everything behaves the way it is supposed to.

You are going to have to do a bit of digging and research on your own to figure out what regular expressions are best to use for the required fields. Try "Googling" ASP.NET regular expressions email, and ASP.NET regular expressions phone, and ASP.NET regular expressions zip

HINT: You may want to download and unzip the validation.zip demo project and look at the various pages for reference.

NOTE: If you get an Unobstrusive Validation error, then you are going to have to add some additional code to your Web.config file. Where might you have seen something like this before?

Once you get everything working, go in and add some additional features to the controls, change the font family and size, background colors, etc. Also, make sure and change the error messages to a different color than the rest of the text on the form to set these messages apart.

When you get done with this exercise, show your Instructor.