1.Open the HTML and JavaScript files in this folder: exercises_extra\\ch12\ eser
ID: 3574323 • Letter: 1
Question
1.Open the HTML and JavaScript files in this folder:
exercises_extrach12 eservation
Then, run the application to see the user interface shown above. Click on the Submit Reservation button and notice it lets you submit anything you want.
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 you’ll want to change that. Also, you might want to add checks for dates like 13/27/2016 or 12/36/2014.
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
Code Below:
INDEX.HTML:
<!DOCTYPE html>
<html>
<head>
<title>Reservation request</title>
<link rel="stylesheet" href="reservation.css">
<script src="library_fields.js"></script>
<script src="library_validate.js"></script>
<script src="library_validate_form.js"></script>
<script src="reservation.js"></script>
</head>
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date">
<span id="arrival_date_error"> </span><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights">
<span id="nights_error"> </span><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" value="standard" checked>Standard
<input type="radio" name="room" id="business" value="business">Business
<input type="radio" name="room" id="suite" value="suite">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" value="king" checked>King
<input type="radio" name="bed" id="double" value="double">Double Double<br>
<input type="checkbox" name="smoking" id="smoking" value="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<span id="name_error"> </span><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email">
<span id="email_error"> </span><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone">
<span id="phone_error"> </span><br>
</fieldset>
<input type="button" id="submit_request" value="Submit Reservation">
<input type="button" id="clear" value="Clear"><br>
</form>
</main>
</body>
</html>
RESPONSE.HTML:
<!DOCTYPE html>
<html>
<head>
<title>Reservation Request</title>
<link rel="stylesheet" href="reservation.css">
</head>
<body>
<main>
<script>
document.write("<h3>The following reservation has been submitted</h3>");
document.write("Name: ", sessionStorage.name, "<br>");
document.write("Phone: ", sessionStorage.phone, "<br>");
document.write("Email: ", sessionStorage.email, "<br>");
document.write("Arrival Date: ", sessionStorage.arrivalDate, "<br>");
document.write("Nights: ", sessionStorage.nights, "<br>");
document.write("Adults: ", sessionStorage.adults, "<br>");
document.write("Children: ", sessionStorage.children, "<br>");
document.write("Room Type: ", sessionStorage.roomType, "<br>");
document.write("Bed Type: ", sessionStorage.bedType, "<br>");
document.write("Smoking: ", sessionStorage.smoking, "<br>");
</script>
</main>
</body>
</html>
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();
};
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;
};
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_FIELDS.JS
"use strict";
var fields = {
arrival_date : {},
nights: {},
name: {},
email: {},
phone: {}
};
Explanation / Answer
Please check the Comment section of the code for the changes and descriptio
index.html
<!DOCTYPE html>
<html>
<head>
<title>Reservation request</title>
<link rel="stylesheet" href="reservation.css">
<script src="library_fields.js"></script>
<script src="library_validate.js"></script>
<script src="library_validate_form.js"></script>
<script src="reservation.js"></script>
</head>
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date">
<span id="arrival_date_error"> </span><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights">
<span id="nights_error"> </span><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" value="standard" checked>Standard
<input type="radio" name="room" id="business" value="business">Business
<input type="radio" name="room" id="suite" value="suite">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" value="king" checked>King
<input type="radio" name="bed" id="double" value="double">Double Double<br>
<input type="checkbox" name="smoking" id="smoking" value="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<span id="name_error"> </span><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email">
<span id="email_error"> </span><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone">
<span id="phone_error"> </span><br>
</fieldset>
<input type="button" id="submit_request" value="Submit Reservation">
<input type="button" id="clear" value="Clear"><br>
</form>
</main>
</body>
</html>
library_fields.js
"use strict";
var fields = {
arrival_date : "",
nights: "",
name: "",
email: "",
phone: ""
};
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) {
// AS per the field type the corresponding validation function is called and if the validation fails then the error is thrown out.
var field = fields[fieldName];
if (!RegisterForm.prototype.isBlank(field)) {
switch(fieldName){
case 'arrival_date':
if (!RegisterForm.prototype.isDate(field)) throw text;
break;
case 'nights':
if (!RegisterForm.prototype.isNumber(field)) throw text;
break;
case 'email':
if (!RegisterForm.prototype.isEmail(field)) throw text;
break;
case 'phone':
if (!RegisterForm.prototype.isPhone(field)) throw text;
break;
}
}else{
throw text;
}
};
// 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
// Added Try and catch block.. as per the field type I have called the validateField and set the corresponding error message
// Incase the validation fails the error which is thrown from the validateField is handled over here.
try{
switch(fieldName){
case 'arrival_date':
RegisterForm.prototype.validateField(fieldName,"Invalid Date Format. Please re - enter date..");
break;
case 'nights':
RegisterForm.prototype.validateField(fieldName," Invalid No of Nights.");
break;
case 'name':
RegisterForm.prototype.validateField(fieldName,"Name can not be null.");
break;
case 'email':
RegisterForm.prototype.validateField(fieldName,"Invalid Email Id");
break;
case 'phone':
RegisterForm.prototype.validateField(fieldName,"Invalid Phone number");
break;
}
}catch(err){
RegisterForm.prototype.setError(fieldName,err);
isOK=false;
break;
}
}
return isOK;
};
library_fields.js
"use strict";
var fields = {
arrival_date : "",
nights: "",
name: "",
email: "",
phone: ""
};
reservation.js
"use strict";
var $ = function(id) { return document.getElementById(id); };
var frm;
var saveReservation = function() {
sessionStorage.arrivalDate = $("arrival_date").value;
// Have added the values in the fields array object so that in the validation section I can refer the corresponding array.
fields['arrival_date']=sessionStorage.arrivalDate;
sessionStorage.nights = $("nights").value;
fields['nights']=sessionStorage.nights;
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;
fields['name']=sessionStorage.name;
sessionStorage.email = $("email").value;
fields['email']=sessionStorage.email;
sessionStorage.phone = $("phone").value;
fields['phone']=sessionStorage.phone;
// submit form
if(RegisterForm.prototype.validateForm()){
$("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();
};
Thanks..
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.