1. Open the index.html and reservation.js files in this folder: assignment6\ Then, run the application and click the Book a Flight button to see the page thats displayed when the form is submitted to the server. 2. Include jQuery, jQuery validation plugin and additional validation methods plugin that are in the downloaded folder. Include them in the appropriate place and appropriate order on the web page. 5% 3. In the JavaScript file, code a statement that moves the focus to the first name text box when the form is first displayed. 10% 4. Add jQuery code that validates all the text boxes on the form using the validation and additional-methods plugins. All of the text boxes require a value. In addition, the flight date, the email address, and phone number must be in valid formats, and the number of air-tickets must be a positive integer. 50% 5. Add custom error messages to the validation for the number of air-tickets that are consistent with the other error messages and that fit on the line that contains the number of air-tickets text box. 35%

html file---------------------------------------------

Air Ticket Booking

name="airticket_form" id="airticket_form">

Passenger Information

First name:

Last name:

Destination:

New-York

Los-Angelos

Montreal

Vancouver

Flight date:

Number of air-tickets:

Carry on laggage:

0

1

Laggage:

0

1

2

Ticket type

Fare:

Economy

Business

First

class

Trip type:

One way

Round trip

Window side

Contact Information

Email:

Phone:

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("*");

// 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 are invalid

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

Thank you for your booking!

We will contact you within the next 24 hours.