In this exercise, youll add data validation to a Reservation application. Heres how the interface looks when the submit button is clicked and theres bad data in the form:

1. Open the files below

2. In the index.html file, notice that there are now span tags next to the text boxes, and the spans have the same name as the text boxes, with _error appended.

3 .Also, notice that there are script tags for three library files. Open each of these files to see that they all contain some starter code. Refer to the Register application in chapter 12 to complete the code for these files. Note that the date validation code in the Register application validates dates in mm/yyyy format, so youll want to change that. Also, you might want to add checks for dates like 13/22/2016 or 12/39/2015.

4. In the main JavaScript file, add code to the saveReservation function that validates the form before storing and submitting the data.

5. Test the application to make sure the data validation is working correctly

This is the second time I had to post this question. I haven't found anyone who answered the question on here properly, I appreciate anyone who takes the time to answer this correctly. Thank you

reservations.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;

}

index.html

Reservation Request

name="reservation_form" id="reservation_form">

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:

Response.html

document.write("

The following reservation has been submitted

");

document.write("Name: ", sessionStorage.name, " ");

document.write("Phone: ", sessionStorage.phone, " ");

document.write("Email: ", sessionStorage.email, " ");

document.write("Arrival Date: ", sessionStorage.arrivalDate, " ");

document.write("Nights: ", sessionStorage.nights, " ");

document.write("Adults: ", sessionStorage.adults, " ");

document.write("Children: ", sessionStorage.children, " ");

document.write("Room Type: ", sessionStorage.roomType, " ");

document.write("Bed Type: ", sessionStorage.bedType, " ");

document.write("Smoking: ", sessionStorage.smoking, " ");

library_fields.js

"use strict"; var fields = { arrival_date : {}, nights: {}, name: {}, email: {}, phone: {} };

library_validate.js

"use strict"; var Validate = function() {};

Validate.prototype.isBlank = function(text) { };

Validate.prototype.isNumber = function(text) { };

Validate.prototype.isDate = function(text) { };

Validate.prototype.isEmail = function(text) { };

Validate.prototype.isPhone = function(text) { };

library_validate_form.js

"use strict"; var RegisterForm = function() { }; RegisterForm.prototype = new Validate(); //inherit

// Method to validate individual field RegisterForm.prototype.validateField = function(fieldName, text) { var field = fields[fieldName]; // add code to test various fields and throw error if test fails if (field.required) {} if (field.isNumber) {} if (field.isDate) {} if (field.isEmail) {} if (field.isPhone) {} };

// Error message methods RegisterForm.prototype.setError = function( fieldName, message ) { $(fieldName + "_error").setAttribute("class", "error"); $(fieldName + "_error").firstChild.nodeValue = message; }; RegisterForm.prototype.clearError = function( fieldName, message ) { $(fieldName + "_error").setAttribute("class", ""); $(fieldName + "_error").firstChild.nodeValue = message || ""; };

// Form methods RegisterForm.prototype.resetForm = function() { for ( var fieldName in fields ) { this.clearError(fieldName, fields[fieldName].message); $(fieldName).value = ""; //clear corresponding textbox } }; RegisterForm.prototype.validateForm = function() { var isOK = true; for ( var fieldName in fields ) { this.clearError(fieldName); // add try/catch block to validate field } return isOK; };

reservation.js

"use strict";

var $ = function(id) { return document.getElementById(id); };

var frm;

var saveReservation = function() {

sessionStorage.arrivalDate = $("arrival_date").value;

sessionStorage.nights = $("nights").value;

sessionStorage.adults = $("adults").value;

sessionStorage.children = $("children").value;

sessionStorage.roomType = $("standard").value; // default value

if ($("business").checked) {

sessionStorage.roomType = $("business").value;

}

if ($("suite").checked) {

sessionStorage.roomType = $("suite").value;

}

sessionStorage.bedType = $("king").value; //default value

if ($("double").checked) {

sessionStorage.bedType = $("double").value;

}

if ($("smoking").checked) {

sessionStorage.smoking = "yes";

} else {

sessionStorage.smoking = "no";

}

sessionStorage.name = $("name").value;

sessionStorage.email = $("email").value;

sessionStorage.phone = $("phone").value;

// submit form

$("reservation_form").submit();

};

var clearForm = function() {

frm.resetForm();

$("arrival_date").focus();

};

window.onload = function() {

frm = new RegisterForm();

frm.resetForm();

$("submit_request").onclick = saveReservation;

$("clear").onclick = clearForm;

$("arrival_date").focus();

};

Reservation Request General Information Arrival date: 12/39/2016 Nights Adults Children Arrival date is invalid three Nights must be a number Preferences Room type: (e) Standard O Business O Suite Bed type. (.. King O Double Double Smoking Contact Information Name Email Phone Name is required Email address is invalid Phone number is invalid graceyahoo.com 123-456-789 Submit Reservation Clear Reservation Request General Information Arrival date: 12/39/2016 Nights Adults Children Arrival date is invalid three Nights must be a number Preferences Room type: (e) Standard O Business O Suite Bed type. (.. King O Double Double Smoking Contact Information Name Email Phone Name is required Email address is invalid Phone number is invalid graceyahoo.com 123-456-789 Submit Reservation Clear