DHTML Utopia Modern Web Design Using JavaScript & DOM- P9

DHTML Utopia Modern Web Design Using JavaScript & DOM- P9:In a single decade, the Web has evolved from a simple method of deliveringtechnical documents to an essential part of daily life, making and breaking relationshipsand fortunes along the way. “Looking something up on the Internet,”by which is almost always meant the Web, is now within reach of almost anyoneliving in a first-world country, and the idea of conducting conversations andbusiness (and probably orchestras) in your Web browser is no longer foreign, butpart of life....
Nội dung trích xuất từ tài liệu:
DHTML Utopia Modern Web Design Using JavaScript & DOM- P9 Chapter 6: Forms and Validation File: genericValidation.js (excerpt) var errText = []; We’re going to step through all the form elements and check only the ones our validation set has regular expressions for: File: genericValidation.js (excerpt) for (var i = 0; i < frm.elements.length; i++) { if (frm.elements[i].name && validationSet[frm.elements[i].name]) { Next, we see some code that prepares the in-page error message elements; it’s the same as the code we used in checkValid. Now, let’s start to display the error message(s) to the user. File: genericValidation.js (excerpt) if (failedE && errDisplay) { errDisplay.innerHTML = validationSet[failedE.name][error]; } In this first case, validation failed and a span for the field does exist, so we write the error message in-page, as before. File: genericValidation.js (excerpt) if (!failedE && errDisplay) { errDisplay.innerHTML = ; } In this second case, there’s no error but there is a span, so we clean up any lingering error text that was previously displayed in-page. Whenever we have an error, we also want to collect up the message for display in a single summary. That’s what this next piece of code does: File: genericValidation.js (excerpt) if (failedE) { var labels = document.getElementsByTagName(label); errText[errText.length] = validationSet[failedE.name][error]; for (var j = 0; j < labels.length; j++) { if (labels[j].htmlFor == failedE.id) { errText[errText.length - 1] += 140Licensed to siowchen@darke.biz Checking on Submission (field + labels[j].firstChild.nodeValue + ); } } } If you look at this code closely, you’ll see that we’re not only grabbing the message associated with the field: we’re also adding the content of the field’s label to the error message. That will tie what the user sees on the screen with what they see in the error message. Sadly, there is no document.getLabelElementsByForValue, so we are forced to iterate through each label element on the page and compare its htmlFor6 property with the id of the given form element. If we find a match, we extract the label’s content (the nodeValue of the firstChild, which is the text node), and use the content to add an extra hint, such as “(field ‘Phone number’)” or similar, to the end of the error message for that field. If no corresponding label can be found, we simply do not add the hint, so the script degrades gracefully. Once the for loop is finished, the script should show any errors that were collec- ted: File: genericValidation.js (excerpt) if (errorsList.length > 0) { alert(Please fix the following errors and resubmit: + errText.join( )); The join method of the errText array is used to combine the collected error messages into a single string, separated by line breaks ( ) for readability. Of course, if any errors were caught, we don’t want the form to submit. To this end, we must cancel the event, which we have to do differently for the Internet Explorer and standards-compliant event models. File: genericValidation.js (excerpt) frm.submitAllowed = false; if (e && e.stopPropagation && e.preventDefault) { e.stopPropagation(); e.preventDefault(); } if (window.event) { 6 Note that this property is labelEle ...