(Solved) : 1 Open Indexhtml Reservationjs Files Folder Assignment6 Run Application Click Book Flight Q28594903 . . .
1. Open the index.html and reservation.js files in this folder:assignment6 Then, run the application and click the Book a Flightbutton to see the page that’s displayed when the form is submittedto the server. 2. Include jQuery, jQuery validation plugin andadditional validation methods plugin that are in the downloadedfolder. Include them in the appropriate place and appropriate orderon the web page. 5% 3. In the JavaScript file, code a statementthat moves the focus to the first name text box when the form isfirst displayed. 10% 4. Add jQuery code that validates all the textboxes on the form using the validation and additional-methodsplugins. All of the text boxes require a value. In addition, theflight date, the email address, and phone number must be in validformats, and the number of air-tickets must be a positive integer.50% 5. Add custom error messages to the validation for the numberof air-tickets that are consistent with the other error messagesand that fit on the line that contains the number of air-ticketstext box. 35%
html file———————————————
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Reservation request</title>
<link rel=”stylesheet” href=”main.css”>
<script src=”airticket.js”></script>
<scriptsrc=”http://code.jquery.com/jquery-2.1.4.min.js”></script>
<script src=”jquery.validate.min.js”></script>
<scriptsrc=”additional-methods.min.js”></script>
</head>
<body>
<h1>Air Ticket Booking</h1>
<form action=”response.html” method=”get”
name=”airticket_form” id=”airticket_form”>
<fieldset>
<legend>Passenger Information</legend>
<label for=”first_name”>First name:</label>
<input type=”text” name=”first_name” id=”first_name”autofocus><br>
<label for=”last_name”>Last name:</label>
<input type=”text” name=”last_name”id=”last_name”><br><br>
<label for=”destination”>Destination:</label>
<select name=”destination” id=”destination”>
<option value=”New-York”>New-York</option>
<option value=”Los-Angelos”>Los-Angelos</option>
<option value=”Montreal”>Montreal</option>
<option value=”Vancouver”>Vancouver</option>
</select><br><br>
<label for=”flight_date”>Flight date:</label>
<input type=”text” name=”flight_date”id=”flight_date”><br><br>
<label for=”number_airtickets”>Number ofair-tickets:</label>
<input type=”text” name=”number_airtickets”id=”number_airtickets”><br><br>
<label>Carry on laggage:</label>
<select name=”carry_laggage” id=”carry_laggage”>
<option value=”0″>0</option>
<option value=”1″>1</option>
</select><br><br>
<label>Laggage:</label>
<select name=”laggage” id=”laggage”>
<option value=”0″>0</option>
<option value=”1″>1</option>
<option value=”2″>2</option>
</select><br>
</fieldset>
<fieldset>
<legend>Ticket type</legend>
<label>Fare:</label>
<input type=”radio” name=”room” id=”standard” class=”left”checked>Economy
<input type=”radio” name=”room” id=”business”class=”left”>Business
<input type=”radio” name=”room” id=”suite” class=”leftlast”>First
class<br>
<label>Trip type:</label>
<input type=”radio” name=”bed” id=”one way” class=”left”checked>One way
<input type=”radio” name=”bed” id=”round” class=”leftlast”>Round trip<br>
<input type=”checkbox” name=”window” id=”window”>Windowside<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for=”email”>Email:</label>
<input type=”text” name=”email” id=”email”><br>
<label for=”phone”>Phone:</label>
<input type=”text” name=”phone” id=”phone”placeholder=”999-999-9999″><br>
</fieldset>
<input type=”submit” id=”submit” value=”Book aflight”><br>
</form>
</body>
</html>
js file—————————————————————————change this file according to html
$(document).ready(function() {
var emailPattern =/b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}b/;
// add a span element after each text box
$(“:text”).after(“<spanclass=’error’>*</span>”);
// move the focus to the first text box
$(“#first_name”).focus();
// the handler for the submit event of the form
// executed when the submit button is clicked
$(“#airticket_form”).submit(
function(event) {
var isValid = true;
// validate the requested arrival date
if ($(“#arrival_date”).val() == “”) {
$(“#arrival_date”).next().text(“This field is required.”);
isValid = false;
} else {
$(“#arrival_date”).next().text(“”);
}
// validate the number of nights
if ($(“#nights”).val() == “”) {
$(“#nights”).next().text(“This field is required.”);
isValid = false;
} else if (isNaN($(“#nights”).val())) {
$(“#nights”).next().text(“This field must be numeric.”);
isValid = false;
} else {
$(“#nights”).next().text(“”);
}
// validate the name entry
var first_name = $(“#first_name”).val().trim();
if (first_name == “”) {
$(“#first_name”).next().text(“This field is required.”);
isValid = false;
}
else {
$(“#first_name”).val(first_name);
$(“#first_name”).next().text(“”);
}
// validate the email entry with a regular expression
var email = $(“#email”).val();
if (email == “”) {
$(“#email”).next().text(“This field is required.”);
isValid = false;
} else if ( !emailPattern.test(email) ) {
$(“#email”).next().text(“Must be a valid email address.”);
isValid = false;
} else {
$(“#email”).next().text(“”);
}
// validate the phone number
if ($(“#phone”).val() == “”) {
$(“#phone”).next().text(“This field is required.”);
isValid = false;
} else {
$(“#phone”).next().text(“”);
}
// prevent the submission of the form if any entries areinvalid
if (isValid == false) {
event.preventDefault();
}
else {
sessionStorage.arrival_date = $(“#arrival_date”).val();
sessionStorage.nights = $(“#nights”).val();
sessionStorage.adults = $(“#adults”).val();
sessionStorage.children = $(“#children”).val();
sessionStorage.room_type =$(“input[name=’room’]:checked”).val();
sessionStorage.bed_type =$(“input[name=’bed’]:checked”).val();
if ($(“input[name=’smoking’]:checked”).val() == “smoking”) {
sessionStorage.smoking = “yes”;
}
else {
sessionStorage.smoking = “no”;
}
sessionStorage.first_name = first_name;
sessionStorage.email = email;
sessionStorage.phone = $(“#phone”).val();
}
} // end function
); // end submit
}); // end ready
reponse html file ——————————————chnage this also accrding to others
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Airticket booking</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
padding: 20px;
}
h3 {
margin: 0;
padding-bottom: .5em;
}
p {
margin: 0;
}
</style>
<scriptsrc=”http://code.jquery.com/jquery-2.1.4.min.js”></script>
<script>
$(document).ready(function() {
var html = “Arrival date: ” + sessionStorage.arrival_date +
“<br>Number of nights: ” + sessionStorage.nights +
“<br>Adults: ” + sessionStorage.adults +
“<br>Children: ” + sessionStorage.children +
“<br>Room type: ” + sessionStorage.room_type +
“<br>Bed type: ” + sessionStorage.bed_type +
“<br>Smoking: ” + sessionStorage.smoking +
“<br>Name: ” + sessionStorage.first_name +
“<br>Email: ” + sessionStorage.email +
“<br>Phone: ” + sessionStorage.phone;
$(“p”).html(html);
});
//]]>
</script>
</head>
<body>
<main>
<h3>Thank you for your booking!</h3>
<p>We will contact you within the next 24hours.</p>
</main>
</body>
</html>
Expert Answer
Answer to 1 Open Indexhtml Reservationjs Files Folder Assignment6 Run Application Click Book Flight Q28594903 . . .
OR