[Solved] Extra 10 1 Use Javascript Validate Form Exercise Ll Use Javascript Validate Reservation Re Q37278006
Extra 10-1 Use JavaScript to validate aform
In this exercise, you’ll use JavaScript to validate areservation request form.
-
Open the index.html and reservation.js files in this folder:
exercises_extrach10reservation
Then, run the application and click the Submit Request button tosee the page that’s displayed when the form is submitted to theserver.
-
In the JavaScript file, notice that the ready event handlercontains the declaration for a variable named emailPattern thatcontains the pattern that will be used to validate the emailaddress.
-
Code a statement that moves the focus to the Arrival date textbox.
-
Code an event handler for the submit event of the form. Thisevent handler should validate the user entries and cancel thesubmission of the form if any of the entries are invalid. Thevalidation 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 that’s provided.Be sure to trim the entries and put them back into the controlsregardless of whether the entries are valid.
reservation.js
$(document).ready(function() { var emailPattern = /b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}b/; }); // end ready
index.html
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>Reservation request</title> <link rel=”stylesheet” href=”main.css”> <script src=”https://code.jquery.com/jquery-3.1.1.min.js”></script> <script src=”reservation.js”></script></head> <body> <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” autofocus><br> <label for=”nights”>Nights:</label> <input type=”text” name=”nights” id=”nights”><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” class=”left” checked>Standard <input type=”radio” name=”room” id=”business” class=”left”>Business <input type=”radio” name=”room” id=”suite” class=”left last”>Suite<br> <label>Bed type:</label> <input type=”radio” name=”bed” id=”king” class=”left” checked>King <input type=”radio” name=”bed” id=”double” class=”left last”>Double Double<br> <input type=”checkbox” name=”smoking” id=”smoking”>Smoking<br> </fieldset> <fieldset> <legend>Contact Information</legend> <label for=”name”>Name:</label> <input type=”text” name=”name” id=”name”><br> <label for=”email”>Email:</label> <input type=”text” name=”email” id=”email”> <span>*</span><br> <label for=”phone”>Phone:</label> <input type=”text” name=”phone” id=”phone” placeholder=”999-999-9999″> <span>*</span><br> </fieldset> <input type=”submit” id=”submit” value=”Submit Request”><br> </form></body></html>
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;}
response.html
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>Reservation Request</title> <style> body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 600px; border: 3px solid blue; padding: 20px; } </style></head><body> <main> <h3>Thank you for your request!</h3> <p>We will contact you within the next 24 hours.</p> </main></body></html>Reservation Request General Information Arrival date: 1/27/2017 Nights Adults: Children Preferences Room type: O Standard O Business Bed type Kin Double Double Suite Smoking Contact Information Name nne Boehm Email anne@murach Phone: Must be a valid email address This field is required 999-999-9999 Submit Request Show transcribed image text Reservation Request General Information Arrival date: 1/27/2017 Nights Adults: Children Preferences Room type: O Standard O Business Bed type Kin Double Double Suite Smoking Contact Information Name nne Boehm Email anne@murach Phone: Must be a valid email address This field is required 999-999-9999 Submit Request
Expert Answer
Answer to Extra 10-1 Use JavaScript to validate a form In this exercise, you’ll use JavaScript to validate a reservation request… . . .
OR
