I am having trouble with the validation portion of this assignment. I will recopy the instructions, because I cannot get the pdf or images to go through. I have the sessionStore correct, and the span set up for the messages. They need to come up beside the input box, not in an alert (The name is correctly set up to validate for what it should look like) I cannot get the images to copy, but running the code should tell you whaty it should look like

In this exercise, youll develop a Web application that stores data in session storage. The interface looks like this (this interface has been provided to you in the index.html file -- be sure to rename this file and follow the required course naming conventions):

[Image will not copy]

Then, when you click on the Submit Reservation button, a new page gets the data from session storage and displays it like this:

[Image will not copy]

In the index.html file, note the coding for the form element. It uses the get method to submit the data to the response.html page. Also, at the bottom of the form element, a button element (not a submit button) is used for the button that submits the form.

In the response.html (you do not have to rename this file) file, note that there is an embedded script tag within the main element in the body of the document, and it contains document.write methods that get the data thats submitted from session storage. This is the page thats called when the form is submitted.

In the JavaScript file, note that three functions are supplied. The $ function. The start of a

saveReservation function that ends by submitting the form. And an onload event handler that attaches the saveReservation function to the click event of the Submit Reservation button and sets the focus on the first textbox on the page.

Run this application without entering any data and click the submit button to see how the response.html file will look when no data has been saved to session storage.

In the saveReservation function of the JavaScript file, get the values from the controls on the page and store them in session storage using the same key names as the response.html file uses.

Using JavaScript (not CSS), validate the fields for date, nights, contact name, email and phone number. To accomplish this you will not only have to make changes to your JavaScript but you will also need to make changes to your index.html file (which you should have renamed).

I have the starting files, and have the sessionStore complete. My problem is the validation. here are my files:

Index.html:

Reservation Request

General Information

Arrival date: Nights: Adults: 1 2 3 4 Children: 0 1 2 3 4

Preferences

Room type: Standard Business Suite Bed type: King Double Double Smoking

Contact Information

Name: Email: Phone:

Reservation.js:

"use strict"; var $ = function(id) { return document.getElementById(id); }; //validate and store information var saveReservation = function() { //Validate and store name if(document.getElementById("name").value != "") { sessionStorage.setItem('name', $("name").value ); //save the name in sessionStorage } else { nameMessage.innerHTML = "Please Enter a name"; return false; } //Validate and store phone number sessionStorage.setItem('phone', $("phone").value ); //save the phone number value in sessionStorage //Validate and store email sessionStorage.setItem('email', $("email").value ); //save the email value in sessionStorage //Validate and store arrivalDate sessionStorage.setItem('arrivalDate', $("arrival_date").value ); //save the arrival_date in sessionStorage //Validate and store nights sessionStorage.setItem('nights', $("nights").value ); //save the nights value in sessionStorage //these do not need validated sessionStorage.setItem('adults', $("adults").value ); //save the adults value in sessionStorage sessionStorage.setItem('children', $("children").value ); //save the children value in sessionStorage //Check the radio buttons and checkboxes if($("standard").checked)//check if the standard checkbox is selected { sessionStorage.setItem('roomType', $("standard").value ); // save the roomType value in sessionStorage } else if($("business").checked)//check if the business checkbox is selected { sessionStorage.setItem('roomType', $("business").value ); // save the roomType value in sessionStorage } else if($("suite").checked)//check if the suite checkbox is selected { sessionStorage.setItem('roomType', $("suite").value ); // save the roomType value in sessionStorage } if($("king").checked)//check if the king checkbox is selected { sessionStorage.setItem('bedType', $("king").value ); // save the bedType value in sessionStorage } else if($("double").checked)//check if the double checkbox is selected { sessionStorage.setItem('bedType', $("double").value ); // save the bedType value in sessionStorage }

if($("smoking").checked)//check if the smoking checkbox is selected { sessionStorage.setItem('smoking', 'yes' ); // save the smoking value to yes in sessionStorage } else { sessionStorage.setItem('smoking', 'no' ); // save the smoking value to no in sessionStorage } // submit form $("reservation_form").submit(); };

window.onload = function() { $("submit_request").onclick = saveReservation; $("arrival_date").focus(); };

response.html:

reservation.css: body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 600px; border: 3px solid blue; padding: 10px 20px; } fieldset { margin-top: 1em; margin-bottom: 1em; padding: .5em; } legend { color: blue; font-weight: bold; font-size: 85%; margin-bottom: .5em; } label { float: left; width: 90px; } input, select { margin-left: 1em; margin-right: 1em; margin-bottom: .5em; } input { width: 14em; } input[type="radio"], input[type="checkbox"] { width: 1em; padding-left: 0; margin-right: 0.5em; } span { color:red; }