exercise 6- 3

MURACH TRAINING Chapter 6 How to script the DOM with JavaScript 199 S 0 Test the Reset button for the new fields. If changes are required, make them Enter all valid data, and click the Register button to submit the form. Because the "get" method is used, the entries are added to the URL for the next page. Exercise 6-3 Enhance the Email List application In this exercise, you'll enhance an Email List application that's similar to the one you saw in chapter 4 by providing better data validation with error messages to the right of the entries: Please join our email list Email Address Re-enter Email Address First Name grace@yahoo.com grace@yahoo Email addresses must match First name is required Jon our PF If you have any problems when you're testing, remember to use Chrome's developer tools as shown in chapter 5 and figure 6-14 of this chapter. Test the application 1. Open your text editor or IDE, and open this HTML file: javascript_jquery exercises\ch06\email\index.html Then, review the JavaScript code 2. Test this application with valid data to see how it works. When you click the Join our List button, another page should be displayed. 3. Click the back button in your browser, then test the application with invalid data. Note that the errors are displayed in alert dialog boxes. Enhance the data validation 4. Review the HTML and notice that span elements that contain asterisks have been added right after the first two input controls. Also notice that these span elements don't have ids. When you enhance the data validation, these elements should receive your error messages. Enhance the data validation so it displays the error messages in the span elements. For this to work, you will need to code the data validation for each entry in a separate if statement. Use a Boolean variable to keep track of whether any entries are invalid.Then, if all of the entries are valid, you can submit the form. If you need help you can refer to the code for the Register application in figure 6-12. 6. Test the application with valid data to be sure it still works. If it does, click the back button in your browser to return to the previous page and then refresh the page. v data. Then, use Chron ist button without entering any data developer tools ve been made to the DOM 're done, close the developer in the HTML are em the Axin our List button with er to view the changes that have y the emer messages. When you're done element. Then, test the before making on the Join our List button before d what happens when the span elements in the le the HTML. delete the asterisk from the first so aplication in Chrome by clicking on the Join at entry. Nothing will happen. Press the F12 key to display the developer tools, click you should see this error message: Cannot set proper This shows that the text node of the first span elem per tools, click on the Console tah ve: Cannot set property 'node Value' of nu ext node of the first span element hasn't been added the DOM because it didn't have a starting value. the asterisk in the span element, and test again to make sure the application is working. MURACH murach's JavaScript and jQuery 3RD EDITION MARY DELAMATER ZAK RUVALCABA START WITH THE JAVASCRIPT ESSENTIALS that every web developer should have... with a special emphasis on the skills that let you get the most from jQuery MASTER THE JQUERY ESSENTIALS including how to create slide shows, image swaps, carousels, and accordions...validate forms...use plugins and widgets...and use Ajax and JSON MASTER THE ADVANCED SKILLS that will take your JavaScript programming to the next level...including how to use the module pattern and IIFEs for creating jQuery plugins 50 COMPLETE APPLICATIONS show you the best ways to use JavaScript and jQuery to ensure your success on the job MURACH TRAINING Chapter 6 How to script the DOM with JavaScript 199 S 0 Test the Reset button for the new fields. If changes are required, make them Enter all valid data, and click the Register button to submit the form. Because the "get" method is used, the entries are added to the URL for the next page. Exercise 6-3 Enhance the Email List application In this exercise, you'll enhance an Email List application that's similar to the one you saw in chapter 4 by providing better data validation with error messages to the right of the entries: Please join our email list Email Address Re-enter Email Address First Name grace@yahoo.com grace@yahoo Email addresses must match First name is required Jon our PF If you have any problems when you're testing, remember to use Chrome's developer tools as shown in chapter 5 and figure 6-14 of this chapter. Test the application 1. Open your text editor or IDE, and open this HTML file: javascript_jquery exercises\ch06\email\index.html Then, review the JavaScript code 2. Test this application with valid data to see how it works. When you click the Join our List button, another page should be displayed. 3. Click the back button in your browser, then test the application with invalid data. Note that the errors are displayed in alert dialog boxes. Enhance the data validation 4. Review the HTML and notice that span elements that contain asterisks have been added right after the first two input controls. Also notice that these span elements don't have ids. When you enhance the data validation, these elements should receive your error messages. Enhance the data validation so it displays the error messages in the span elements. For this to work, you will need to code the data validation for each entry in a separate if statement. Use a Boolean variable to keep track of whether any entries are invalid.Then, if all of the entries are valid, you can submit the form. If you need help you can refer to the code for the Register application in figure 6-12. 6. Test the application with valid data to be sure it still works. If it does, click the back button in your browser to return to the previous page and then refresh the page. v data. Then, use Chron ist button without entering any data developer tools ve been made to the DOM 're done, close the developer in the HTML are em the Axin our List button with er to view the changes that have y the emer messages. When you're done element. Then, test the before making on the Join our List button before d what happens when the span elements in the le the HTML. delete the asterisk from the first so aplication in Chrome by clicking on the Join at entry. Nothing will happen. Press the F12 key to display the developer tools, click you should see this error message: Cannot set proper This shows that the text node of the first span elem per tools, click on the Console tah ve: Cannot set property 'node Value' of nu ext node of the first span element hasn't been added the DOM because it didn't have a starting value. the asterisk in the span element, and test again to make sure the application is working. MURACH murach's JavaScript and jQuery 3RD EDITION MARY DELAMATER ZAK RUVALCABA START WITH THE JAVASCRIPT ESSENTIALS that every web developer should have... with a special emphasis on the skills that let you get the most from jQuery MASTER THE JQUERY ESSENTIALS including how to create slide shows, image swaps, carousels, and accordions...validate forms...use plugins and widgets...and use Ajax and JSON MASTER THE ADVANCED SKILLS that will take your JavaScript programming to the next level...including how to use the module pattern and IIFEs for creating jQuery plugins 50 COMPLETE APPLICATIONS show you the best ways to use JavaScript and jQuery to ensure your success on the job