1. Warm Up: Try Some Examples (HTML & Javascript)
- First, open canvas, go to Assignments, and then download
HW2_SampleCode.zip file into your workspace (U:\workspace or something like that!). Then, unzip.
- Play with each of the given examples (in the ExamplesJS directory). Open them using a text editor of your choice and modify parts of the html or js files to learn how the different instructions work. If you want to use eclipse instead of notepad or vim or emacs etc., create a new static web project and create new html file and open it with a browser.
- Check the code of the example function of validation2.html in the ExampleValidation and see how it works by open validation2.html in web browser.
Note: w3schools.com is a good site to learn about web technologies.
Note that the assignment assumes you have understood these examples.
Note: Please always use relative path in your homeworks and Portfolios
2. Form Validation
2.1 Create a form in HTML and validate entries of the form using javascript. [25 points]
2.1.1 Create two files validation1.html and validation1.js.
2.1.2 The TITLE of the validation1.html page should be “Validation Form“.
2.1.3 Create a HTML form in validation1.html:
- Containing the fields as in the table below.
- In addition, it should also have a “Continue”
- Make it look reasonably good.
Validation rules will be explained in next step.
| FIELD LABEL | Field Type | Validation rule | RESULT |
| First name | TextField | *Required.
Must contain only alphabetic or numeric characters. |
|
| Last name | TextField | *Required.
Must contain only alphabetic or numeric characters. |
|
| Gender | Dropdown(male, female) | *Required | |
| State | Dropdown(Californi a, Florida, New
York, Texas, Hawaii, Washington, Colorado,Virginia, Iowa, Arizona) |
*Required
Select from given list.. |
*Required field = Cannot be Empty.
- Read http://www.w3schools.com/js/js_validation.asp.
- Now, write Javascript code in js so that when user clicks “Continue” button it does the following:
- It validates the entries (as per the table above) and for each entry
if the validation was successful, else it displays
(These images are included in the lab’s zip file as correct.png and wrong.png.) and the notification message about the correct format of input to users (check
ExampleValidation/validation2.html as an example) .
- Once the validation is successful, it goes to the next page
(validation2.html)
- Remember to include js in the head element of validation.html.
2.2 Create a form in HTML and validate entries of the form using javascript. [20 points]
- Create two files html and validation2.js.
- The TITLE of the html page should be “Contact information“.
- Create a HTML form in html:
- Containing the fields as in the table below.
- In addition, it should also have a “Submit”
- Make it look reasonably good.
Validation rules will be explained in next step.
| FIELD LABEL | Field Type | Validation rule | RESULT |
| TextField | *Required.
Must be in the form [email protected] x should be alphanumeric (e.g. no special symbols). |
||
| Phone | TextField | *Required.
Must be in the form xxx-xxx-xxxx or xxxxxxxxxx. x should be numeric |
|
| Address | TextField | *Required
Must be in the form of city & state. example: Ames,IA |
*Required field = Cannot be Empty.
- Read http://www.w3schools.com/tags/att_input_pattern.asp. Also, do look at validation example in ExamplesJS folder.
- Write Javascript code in js to validate the form as per the rules in the above table when the user clicks Submit button
- Your code should displayif the validation was successful, or if
there was an error, displayand the notification message about the
correct format of input to users (check
ExampleValidation/validation2.html as an example) .
- Remember to include js in the head section of validation2.html.
