document.getElementsByTagName TOLID 13. Save your changes to script.js, open index.htm in a browser, and then test various combinations of invalid and valid data, including nonnumeric entries in number fields, to ensure that the scripts you wrote behave as you expect. Debug your code as necessary until it functions correctly. Hands-On Project 6-2 In this exercise, you'll enhance the form you worked with in Hands-on Project 6-1 to simu- late the behavior of the placeholder attribute in IE8. 1. In the file manager for your operating system, copy the completed contents of the HandsOn Project 6-1 folder to the HandsOn Project6-2 folder. 2. In your text editor, open the index.htm file from the HandsOnProject6-2 folder, change "Hands-on Project 6-1" to Hands-on Project 6-2 in the comment section, in the title element, and in the hi element, and then save your changes. 3. Open script.js, and then in the comment section, change "Hands-on Project 6-1" to Hands-on Project 6-2. Hands-On Projects Add the following the functions to replicate the behavior in modern browse of the plan older attributes assholder adres document.getElementById("adideanput r.style.color back addresionalueaddressBox.placeholder) adresBox.value a cot bon contains tout entry checklaceholder o addressBox - document.getElementById"addrinput"). addresBox.value-*) addressbok.style.color - rgb(178,184,183) addressBox.value addressBox.placeholders 28 20 21 22 add piaceholder text for browsers that don't support place attribute function generatePlaceholder() (Modernizr. Input.placeholder) yar addressBox document.getElementById("addrinput) addressBox.value-addressBox.placeholder: addressBox.style.color="rgb(178, 184,183)"; (addressBox.addEventListener){ addressBox.addEventListener("focus", zeroPlaceholder, 35 26 27 28 false); addressBox.addEventListener("blur", checkplaceholder, falsel: Det faddresaBox.attachEvent) { address8ox.attachEvent("onfocus", zeroPlaceholder: 29 30 apter 6 Enhancing and Validating Forms addresston.attachEvent tranblue, Choo Pohoda 5 Create the following function to call other functions to set up the page: un mittat for configuration functions on setup Page 1 createEventListeners(); generatePlaceholder() 6 Change the event listener code at the end of the file to the following: (window.addEventListener) window.addEventListener("load", setUpPage, false); } else { window.attachEvent) window.attachEvent("onload", setUpPage); 7. Save your changes to script.js, open index.htm in IE8, and verify that the placeholder text is displayed. Click in the Street Address field, and verify that the placeholder text is removed. Without typing in the Street Address field, click elsewhere on the page and verify that the placeholder text is displayed once again. Click in the Street Address field, type a fictional address, and verify that the text is displayed in black rather than gray. If necessary, debug your code until it functions correctly. Hands-On Project 6-3 In this exercise, you'll enhance the form you worked with in Hands-on Project 6-2 to auto- matically move the focus to the next box when a user has typed the maximum number of characters for each component of the Social Security number. 1. In the file manager for your operating system, copy the completed contents of the HandsOn Project 6-2 folder to the HandsOn Project 6-3 folder. 2. In your text editor, open the index.htm file from the HandsOnProject6-3 folder, change "Hands-on Project 6-2" to Hands-on Project 6-3 in the comment section, the title element, and in the hi element, and then save your changes. 3Open script.js, and then in the comment section, change "Hands-on Project 6-2" Hands-on Project 6-3. Desktop/CIST 1620/Chapter06/HandsOnProject6-1/script.js. throw "Please complete all fields."; errorDiv.style.display- 5 errorDiv.innerHTML = "none"; 7 -8-) catch(msg) { FO 21 72 13 errorDiv.style.display = errorDiv.innerHTML = msg: 75 76 formValidity = false; 78 - 79 7 I 3 B1 create event listeners + BS 85 BO function createEventListeners() { alert(2); var form = document.getElementsByTagName("form" to: It form.addEventListener) { forn.addEventListener("subar", validateForm, false); else if (torm.attachEvent) { tore.attachEvent("submit, validateForm) retenttisteners olunteetstyanettel: view Search Go Window # $ Help script.js Sonktop/CIST 1520/Chapter06/Handton Project3-1/scripts validate forms/ - function validateForm(evt) { if (evt.preventDefault) { evt.preventDefault(); // prevent form from submitting I else ! evt. return value = false; // prevent form from submitting in IEB Tornvalidity = trues that reset value for revalidation validateRequired(); if (formalidity = true) document.getElementsByTagName("force submit(); 40 2 > et functions when page finishes loading / It window.addEventListener){ window.addEventListener("load", createEventListeners, false): } else if (window.attachEvent) { Wow.attachEvent("onload". CreateEventListeners) tuts document.gerySelector contattitutit penumber Low errorDiv.style.display - errorDiv.innerHTML = 'none": 3 catch(msg) { errorDiv.style.display = errorDiv.innerHTML = mg; fornvalidity = false; 3 create event listeners / 3 function createEventListeners() { alert 2): var form document.getElementsByTagName("form")01: if (form.addEventListener){ torm.addEventListener("submit", validateForm, false); } else if (form.attachEvent) { form.attachEvent("onsubmit", validateForm): createEventListenerst) { cocent.getElementsByTagName('fortoli Volidateforme View Search Go Window # Help index.htm CIST 1520 Chapter06/HandsOnProject - Index.htm meta name="viewport" content="width-device-width, initial-scale=1.0"> chody cheader chis Hands-on Project 6-1 articles

Personal Information

com action results.ht">

fieldset idcontactinto Street Address City - State/Province Label torripingut Zip/Postal Code