Form Validation help..

(HTML/CSS provided below)

HTML code:

Photo Details

Title Description
Continent Choose continent Africa Asia Europe North America South America Country Choose country Canada Mexico United States City	Copyright? All rights reserved Creative Commons Creative Commons Types Attribution Noncommercial No Derivative Works Share Alike
I accept the software license
Rate this photo: Color Collection:	Date Taken: Time Taken:

CSS code:

/* general text formatting */

h1, h2, h3, nav, footer { font-family: Georgia, Cambria, "Times New Roman", serif; } body { font-family: "Lucida Sans", Verdana, Arial, sans-serif; font-size: 85%; }

table { border: collapse; border-spacing: 0; width; 90%; margin: 0 auto; } table tbody td{ /* border: 1pt solid #95BEF0; */ line-height: 1.5em; vertical-align: top; padding: 0.5em 0.75em; }

legend { background-color: #EBF4FB ; margin: 0 auto; width: 90%; padding: 0.25em; text-align: center; font-weight: bold; font-size: 100%; } fieldset { margin: 1em auto; background-color: #FAFCFF; width: 60%; } form p { margin-top: 0.5em; }

.box { border: 1pt solid #95BEF0; padding: 0.5em; margin-bottom: 0.4em; }

.rectangle { background-color: #EBF4FB; padding: 0.5em; } .centered { text-align: center; }

.rounded, .rounded:hover { border: 1px solid #172d6e; border-bottom: 1px solid #0e1d45; border-radius: 5px; text-align: center; color: white; background-color: #8c9cbf; padding: 0.5em 0 0.5em 0; margin: 0.3em; width: 7em; -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3; box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3; } .rounded:hover { background-color: #7f8dad; }

Part 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 you JavaScript in this file 3. Create an external JavaScript file called lab5-1-hightlight .css and place it relative to your html file as css/lab5-1-hightlight. Css. Create a CSS style that can be used to highlight blank field (i.e. missing data). Have the style change the colour of the field to a colour that will draw the user's attention (red) 4. Setup a listener on the form's submit event tot that the code prevents the submission of the form (preventDefault()) if either the title of description field is left blank or the accept license box is not checked; otherwise submit the form. 5. Enhance the JavaScript so that black fields trigger a chance in the appearance of the form using the style from step 3