Construction of User Interfaces Homework 2

COM S/SE 319 : Construction of User Interfaces
Fall 2021
Homework 2
[Total Points: 50]

1. Warm Up: Try Some Examples (HTML & Javascript)
a. First, open canvas, go to Assignments, and then download
Fall2021_HW2_SampleCode.zip file into your workspace (U:\workspace or
something like that!). Then, unzip.
b. 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.
c. 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:
a) Containing the fields as in the table below.
b) In addition, it should also have a “Continue” button.
c) Make it look reasonably good.
Validation rules will be explained in next step.
1
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.
d) Read http://www.w3schools.com/js/js_validation.asp.
e) Now, write Javascript code in validation1.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
displays 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)
f) Remember to include validation1.js in the head element of
validation.html.
2
2.2 Create a form in HTML and validate entries of the form using javascript. [20
points]
2.2.1 Create two files validation2.html and validation2.js.
2.2.2 The TITLE of the validation2.html page should be "Contact information".
2.2.3 Create a HTML form in validation2.html:
a) Containing the fields as in the table below.
b) In addition, it should also have a “Submit” button.
c) Make it look reasonably good.
Validation rules will be explained in next step.
FIELD LABEL Field Type Validation rule RESULT
Email TextField *Required.
Must be in the form
xxx@xxx.xxx
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.
d) Read http://www.w3schools.com/tags/att_input_pattern.asp. Also, do look
at validation example in ExamplesJS folder.
e) Write Javascript code in validation2.js to validate the form as per the
rules in the above table when the user clicks Submit button
f) Your code should display if the validation was successful, or if
there was an error, display and the notification message about the
3
correct format of input to users (check
ExampleValidation/validation2.html as an example) .
g) Remember to include validation2.js in the head section of
validation2.html.
2. What to Submit:
Make sure your solutions work on Chrome (which is what TAs will use to grade the assignment).
Submit via Canvas a compressed file (.zip) (rename it with your LAST NAME) containing the
following:
1. All the files (.html and .js) which are needed in order to run your program(s). [45 points]
2. A report (.docx or .pdf) describing your solution approach and screenshots of every
required output. [5 points].
4