Description
Part I: Form Validation
In this exercise you will use JavaScript to pre-validate a form before submission.
1. Download the provided HTML5 code and CSS. Place them in your local development
directory. You will be able to view the page without a webserver. Examine the lab5-
1.html file to understand how specific elements have been identified. Do not modify
the HTML code.
2. Create an external JavaScript file called lab5-1.js and place it relative to your html
file as script/lab5-1.js. Place all your JavaScript in this file.
3. In lab5-1.js, create a CSS style that can be used to highlight blank field (i.e., missing
data). Have the style change the color of the field to a color that will draw the user’s
attention (red).
4. Setup a listener on the form’s submit event so that the code prevents the submission of
the form (preventDefault()) if either the title or description field is left blank or the
accept license box is not checked; otherwise submit the form.
5. Enhance the JavaScript so that blank fields trigger a change in the appearance of the
form using the style from step 3.
6. Add another listener to the fields so that when the user types into a field (changed
event), JavaScript removes the color styling as the field is now valid.
Testing:
1. Test the form in your browser to make sure fields function correctly. Attempt to submit
the form with either field blank or ensure the offending field is highlighted. Ensure that
the page is not refreshed.
2. Type into the highlighted fields and check to ensure that the error color is removed.
2
Part II: Node Highlighting Helper
In this exercise you will write a helper script that could be used on any web page to help
identify different elements simply by including the JavaScript file. Use your submitted code
from lab 3 (the table and form lab) as a basis for testing. The goal here is use only JavaScript to
create the desired end result as shown in Figure 1 below.
Figure 1 – Node Helper Example
1. Create a copy of your submission for lab 3 and rename it lab5-2.html.
2. Create a JavaScript file called lab5-2.js and place it relative to your html file as
script/lab5-2.js. Place all you JavaScript in this file.
3. Your script should navigate every element of the DOM for a given page. For each
element in the body of the page, determine whether it is a textNode (type 3) or not.
4. Have your script create a new child node for every non-text node encountered. The
new node should take on the class “hoverNode” and innerHTML equal to the parent
tag name. Define appropriate styles for this CSS class in your script so that the element
is yellow (as shown in Figure 1).
5. Add listeners so that when you click on the newly created nodes, they will alert you to
information about the tag name, so that when a node is clicked a pop-up alerts you to
information about the node including its ID and innerHTML.
Testing:
1. Test your script by loading it onto any page (but start with the page from lab 3). All the
tags should be identified and yellow pop-up boxes are displayed.
3
2. Reflect on how to improve/enhance this script into a more useful tool for web
development and debugging.
Evaluation Criteria:
**Part I**
1 point JS file included
1 point Styling highlight
2 points Listener with preventDefault() associated
with onSubmit; Prevents submission if fields
are not complete
2 point Change in appearance (2 spots at least – by
class) if not valid
2 point Listener to remove color styling when fields
are correct
**Part II**
3 points Navigation of all tags and determination of
tag type
2 point Creation and placement of child nodes with
correct class and innerHTML text
3 points Styling of class
3 points Listener on Nodes – alert with information
1 point Overall function