Question
Open the index.html and reservation.js files in this folder: exercises_extrach10 eservation Then, run the application and click the Submit Request button to see the page
Open the index.html and reservation.js files in this folder:
exercises_extra\ch10 eservation\
Then, run the application and click the Submit Request button to see the page thats displayed when the form is submitted to the server.
In the JavaScript file, notice that the ready event handler contains the declaration for a variable named emailPattern that contains the pattern that will be used to validate the email address.
Code a statement that moves the focus to the Arrival date text box.
Code an event handler for the submit event of the form. This event handler should validate the user entries and cancel the submission of the form if any of the entries are invalid. The validation is as follows:
A value must be entered into each text box. The number of nights must be numeric. The email address must match the pattern thats provided.
Be sure to trim the entries and put them back into the controls regardless of whether the entries are valid.
INDEX.html
Reservation Request
main.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.left {
width: 1em;
padding-left: 0;
}
p {
margin-top: 0;
margin-bottom: .5em;
}
input.last {
margin-bottom: 1em;
}
#adults, #children {
width: 35px;
}
#smoking {
width: 1em;
margin-left: 0;
}
#submit {
margin-left: 0;
width: 10em;
}
span {
color: red;
}
reservation.js
$(document).ready(function() {
var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
}); // end ready
response.html
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
padding: 20px;
}
Thank you for your request!
We will contact you within the next 24 hours.
Reservation Request General Information Arrival date: /27/2017 Nights Adults: Children 2 Preferences Room type Standard Business Suite Bed type King Double Double Smoking Contact information Name: ne Boehm Email Phone: anne@murach Must be a valid email address 999-999-9999 This field is required Submit RequestStep by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started