This exercise guides you through the process of making some enhancements to the Email List application. The form for this application looks like this: see image.
1. Use your text editor or IDE to open the application in the folder: javascript_jquery\exercises\ch10\email_list
2. Test the application, and notice that the focus isn't in the first text box. Modify the JavaScript so it moves the focus to the first text box when the document is loaded, and then test again.
3. Review the code in the JavaScript file, and note that it contains validation routines for the first five fields. Then, test this form by clicking the Join List button before you enter any data in this form. Oops! The data is submitted even though no entries have been made.
4. To fix this, you must stop the default action of the submit button. To do that, code the preventDefault() method of the Event object in the if statement at the end of the file, as in figure 10-6. Remember that the name that you use for the Event object must be the same name of the parameter that's used for the submit() event handler. Now, test again with empty fields. This should display "This field is required." to the right of each field except the zip-code and email-me-about fields.
5. Enter four spaces in the first-name field and click the Join List button again. Note that the error message is removed, which means the four spaces have been accepted as a valid entry.
6. Fix this problem by trimming the first-name entry before it is validated, as in the code for the last-name entry. This trimmed value should also be placed in the text box whether or not the entry is valid. Test this enhancement by first entering just four spaces in this field and then by entering four spaces followed by a first name.
7. Add the code for validating the zip-code field. An entry is required, the entry must be numeric, and the entry must be five digits. Now, test this change.
8. Add the code for validating the check boxes. For this application, at least one check box must be selected. To perform this validation, you can create a variable that holds an array. Then, you can get all the check boxes that are selected. To do that, you can use the :checkbox and :checked selectors. If none of the check boxes are selected, display an error message in the span element that follows the last check box. Otherwise clear that span element.
email_list.css
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 670px;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
color: blue;
}
div {
margin-bottom: 1em;
}
label {
display: inline-block;
width: 11em;
text-align: right;
}
input {
margin-left: 1em;
margin-right: 0.5em;
}
span {
color: red;
}
index.html
< !DOCTYPE html >
< html >
< head >
< meta charset="UTF-8" >
< meta name="viewport" content="width=device-width, initial-scale=1" >
< title >Join Email List - Victor Catalan< /title >
< link rel="stylesheet" href="email_list.css" >
< /head >
< body >
< main >
< h1 >Please join our email list< /h1 >
< form id="email_form" name="email_form"
action="join.html" method="get" >
< div >
< label for="email_1" >Email Address:< /label >
< input type="text" id="email_1" name="email_1" >
< span >*< /span >
< /div >
< div >
< label for="email_2" >Confirm Email Address:< /label >
< input type="text" id="email_2" name="email_2" >
< span >*< /span >
< /div >
< div >
< label for="first_name" >First Name:< /label >
< input type="text" id="first_name" name="first_name" >
< span >*< /span >
< /div >
< div >
< label for="last_name" >Last Name:< /label >
< input type="text" id="last_name" name="last_name" >
< span >*< /span >
< /div >
< div >
< label for="state" >State Code:< /label >
< input type="text" id="state" name="state" >
< span >*< /span >
< /div >
< div >
< label for="zip_code" >Zip Code:< /label >
< input type="text" id="zip_code" name="zip_code" >
< span >*< /span >
< /div >
< div >
< label >Email me about:< /label >
< input type="checkbox" name="web" id="web" value="web" >Web books
< input type="checkbox" name="java" id="java" value="java" >Java books
< input type="checkbox" name="net" id="net" value="net" >.NET books
< span >*< /span >
< /div >
< div >
< label > < /label >
< input type="submit" id="join_list" name="join_list" value="Join List" >
< input type="reset" id="reset" name="reset" value="Reset" >
< /div >
< /form >
< /main >
< script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" >< /script >
< script src="email_list.js" >< /script >
< /body >
< /html >
join.html
< !DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< title >Thanks for joining - Victor Catalan< /title >
< link rel="stylesheet" href="email_list.css" >
< /head >
< body >
< main >
< h1 >Thanks for joining our email list!< /h1 >
< /main >
< /body >
< /html >