Peter Lubbers - Pro HTML 5 Programming

Recommendations

Info

184 CHAPTER 7 ■ USING THE HTML5 FORMS API value, the browser might present an error message to the user that “This field requires a value.” Once supported, this is the text string that would be returned by the validationMessage field, and it would adjust according to the current state of validation on the control. Validation feedback On the subject of validation feedback… one topic we’ve avoided thus far is how and when the browser should present the user with feedback on a validation error. The specification does not dictate the terms of how the user interface is updated to present an error message, and existing implementations differ fairly significantly. Consider the case for Opera. In Opera 10.5, the browser indicates that a validation error has occurred by marking the field in error with a popup message and a flashing red field. In contrast, the Google Chrome browser only navigates to the offending field and puts the focus there when an error is found. What is the correct behavior? Neither is specified. However, if you would like to take control of the feedback shown to the user when a validation error occurs, there is an appropriate handler for you to do so: the invalid event. Whenever a form is checked for validity—either due to the form being submitted, or due to the checkValidity function being called directly—any form in an invalid state will be delivered an invalid event. This event can be ignored, observed, or even cancelled. To add an event handler to a field which will receive this notification, add some code similar to Listing 7-2: Listing 7-2. Adding event handlers for invalid events // event handler for "invalid" events function invalidHandler(evt) { var validity = evt.srcElement.validity; // check the validity to see if a particular constraint failed if (validity.valueMissing) { // present a UI to the user indicating that the field is missing a value } // perhaps check additional constraints here… // If you do not want the browser to provide default validation feedback, // cancel the event as shown here evt.preventDefault(); } // register an event listener for "invalid" events myField.addEventListener("invalid", invalidHandler, false);
CHAPTER 7 ■ USING THE HTML5 FORMS API Let’s break that code snippet down a bit. First, we declare a handler to receive invalid events. The first thing we do inside that handler is check the source of the event. Recall that the invalid event is fired on the form control with a validation error. Therefore, the srcElement of the event will be the misbehaving form control. From the source, we grab the validity object. Using this ValidityState instance, we can check its individual constraint fields to determine exactly what went wrong. In this case, since we know that our field has a required attribute on it, we first check to see if the valueMissing constraint has been violated. If our check succeeds, we can modify the user interface on the page to inform the user that a value needs to be entered for the field in error. Perhaps an alert or an informative error region could be displayed? This is up to you to decide. Once we’ve told the user what the error is and how to correct it, we need to decide if we want the browser itself to display its built-in feedback. By default, the browser will do just that. To prevent the browser from showing its own error message, we can call evt.preventDefault() to stop the default handling and take care of the matter entirely ourselves. Once again, the choice here is yours. The HTML5 Forms API provides you with the flexibility to achieve a customized API or to fall back to default browser behavior. Turning Off Validation In spite of the power behind the validation API, there are… (ahem) valid reasons why you might want to turn off validation on a control or an entire form. The most common reason is that you might choose to submit the temporary contents of a form to be saved or retrieved for later, even if the contents aren’t quite valid yet. Imagine the case of a user who is entering a complex order entry form, but needs to run an errand midway through the process. Ideally, you might present the user with a “save” button which stores the values of the form by submitting them to the server. However, if the form was only partially completed, validation rules might prevent the content from being submitted. The user would be very displeased if she had to complete or abandon the form due to an unexpected interruption. To handle this, a form itself can be programmatically set with the attribute noValidate, which will cause it to forego any validation logic otherwise present and simply submit the form. Naturally, this attribute can be set either via script or original markup. A more useful way to turn off validation is to set a formNoValidate attribute on a control such as a form submit button. Take the following submit button, set up as a “save” button, for example: This snippet will create a two normal looking submit buttons. The second will submit the form, as usual. However, the first button is marked with the noValidate attribute, causing all validation to be bypassed when it is used. This allows the data to be submitted to the server without checking for correctness. Of course, your server will need to be set up to handle unvalidated data, but best practices dictate that this should be the case at all times. Building an Application with HTML5 Forms Now, let’s use the tools we’ve described in this chapter to create a simple signup page which showcases new features in HTML5 Forms. Turning back to our familiar Happy Trails Running Club, we’ll create a page for race registration that incorporates new form elements and validation. 185
Page 1 and 2:
THE EXPERT’S VOICE ® IN WEB DEVE
Page 3 and 4:
■ ■ ■ Pro HTML5 Programming P
Page 5 and 6:
For my beautiful wife, Vittoria, an
Page 7 and 8:
Contents ■Foreword ..............
Page 9 and 10:
■ CONTENTS Implementing Canvas Se
Page 11 and 12:
■ CONTENTS Summary ..............
Page 13 and 14:
■ CONTENTS Setting and Retrieving
Page 15 and 16:
Foreword In June 2004, representati
Page 17 and 18:
About the Technical Reviewer � Pa
Page 19 and 20:
Introduction HTML5 is brand new. In
Page 21 and 22:
C H A P T E R 1 ■ ■ ■ Overvie
Page 23 and 24:
CHAPTER 1 ■ OVERVIEW OF HTML5 wit
Page 25 and 26:
Interoperability Simplification CHA
Page 27 and 28:
• MathML • Microdata • Server
Page 29 and 30:
Figure 1-1. A page rendered in stan
Page 31 and 32:
Table 1-2. New sectioning HTML5 ele
Page 33 and 34:
CHAPTER 1 ■ OVERVIEW OF HTML5 Wit
Page 35 and 36:
article { background-color: #eee; d
Page 37 and 38:
Figure 1-2. An HTML5 page with all
Page 39 and 40:
CHAPTER 1 ■ OVERVIEW OF HTML5 The
Page 41 and 42:
Figure 1-3. Developer Tools view in
Page 43:
CHAPTER 1 ■ OVERVIEW OF HTML5 All
Page 46 and 47:
26 CHAPTER 2 ■ USING THE HTML5 CA
Page 48 and 49:
Page 50 and 51:
Page 52 and 53:
Download from Wow! eBook 32 CHAPTE
Page 54 and 55:
Page 56 and 57:
Page 58 and 59:
Page 60 and 61:
Page 62 and 63:
Page 64 and 65:
Page 66 and 67:
Page 68 and 69:
Page 70 and 71:
Page 72 and 73:
Page 74 and 75:
Page 76 and 77:
Page 78 and 79:
Page 80 and 81:
Page 82 and 83:
Page 85 and 86:
C H A P T E R 3 ■ ■ ■ Working
Page 87 and 88:
Audio and Video Codecs CHAPTER 3
Page 89 and 90:
Table 3-1. Browser support for HTML
Page 91 and 92:
MEDIA FOR EVERYONE CHAPTER 3 ■ WO
Page 93 and 94:
CHAPTER 3 ■ WORKING WITH HTML5 AU
Page 95 and 96:
Table 3-4 shows a few of the read-o
Page 97 and 98:
Page 99 and 100:
Page 101 and 102:
Page 103 and 104:
find the actual frame since the vid
Page 105 and 106:
LOSING VIEWERS IN THE OF AN EYE CH
Page 107 and 108:
C H A P T E R 4 ■ ■ ■ Using t
Page 109 and 110:
A device can use any of the followi
Page 111 and 112:
Table 4-4. Pros and cons of cell ph
Page 113 and 114:
Figure 4-1. HTML5 Geolocation brows
Page 115 and 116:
CHAPTER 4 ■ USING THE HTML5 GEOLO
Page 117 and 118:
Page 119 and 120:
Page 121 and 122:
Page 123 and 124:
Listing 4-6. The Haversine formula
Page 125 and 126:
Listing 4-9. Adding the loadDemo()
Page 127 and 128:
THE EASIEST WAY TO TRAVEL CHAPTER 4
Page 129 and 130:
var deltaLatitude = toRadians(latit
Page 131 and 132:
Practical Extras CHAPTER 4 ■ USIN
Page 133 and 134:
Show Me on a Google Map CHAPTER 4
Page 135 and 136:
C H A P T E R 5 ■ ■ ■ Using t
Page 137 and 138:
CHAPTER 5 ■ USING THE COMMUNICATI
Page 139 and 140:
Page 141 and 142:
Page 143 and 144:
var defaultTitle = "Portal [http://
Page 145 and 146:
Send Notification CHAPTER 5 ■ U
Page 147 and 148:
Figure 5-4. Difference between clie
Page 149 and 150:
“SEEMINGLY ARBITRARY” TIMES CHA
Page 151 and 152:
crossOriginRequest.upload.onprogres
Page 153 and 154: CHAPTER 5 ■ USING THE COMMUNICATI
Page 155 and 156: CHAPTER 5 ■ USING THE COMMUNICATI
Page 157 and 158: C H A P T E R 6 ■ ■ ■ Using t
Page 159 and 160: Figure 6-1. The complexity of real-
Page 161 and 162: Listing 6-2. The WebSocket interfac
Page 163 and 164: Listing 6-4. HTTP response header H
Page 165 and 166: Figure 6-4. Latency comparison betw
Page 167 and 168: EXISTING WEBSOCKET SERVERS CHAPTER
Page 169 and 170: CHAPTER 6 ■ USING THE HTML5 WEBSO
Page 171 and 172: def terminate(self): self.ready_sta
Page 173 and 174: self.sessions = [] self.port = port
Page 175 and 176: Basic API Usage CHAPTER 6 ■ USING
Page 185 and 186: HTML5 WebSocket / Geolocation Track
Page 187: } } Summary incomingRow = docume
Page 190 and 191: 170 CHAPTER 7 ■ USING THE HTML5 F
Page 192 and 193: Download from Wow! eBook 172 CHAPT
Page 212 and 213: Download from Wow! eBook
Page 214 and 215: 194 CHAPTER 8 ■ USING THE HTML5 W
Page 254 and 255:
234 CHAPTER 9 ■ USING THE HTML5 W
Page 256 and 257:
Page 258 and 259:
Page 260 and 261:
Page 262 and 263:
Download from Wow! eBook
Page 264 and 265:
244 CHAPTER 10 ■ CREATING HTML5 O
Page 266 and 267:
Page 268 and 269:
Page 270 and 271:
Page 272 and 273:
Download from Wow! eBook 252 CHAPT
Page 274 and 275:
Page 276 and 277:
Page 279 and 280:
C H A P T E R 11 ■ ■ ■ The Fu
Page 281 and 282:
Figure 11-1. Quake II 3D Shaders CH
Page 283 and 284:
CHAPTER 11 ■ THE FUTURE OF HTML5
Page 285 and 286:
Page 287:
Page 290 and 291:
270 ■ INDEX unsupported, 68 using
Page 292 and 293:
Download from Wow! eBook 272 ■ I
Page 294 and 295:
274 ■ INDEX Web SQL database supp
Page 296 and 297:
276 ■ INDEX HTML5 page CSS file f
Page 298 and 299:
278 ■ INDEX media elements. See a
Page 300 and 301:
280 ■ INDEX building application
Page 302 and 303:
Download from Wow! eBook 282 ■ I
Page 304:
284 ■ INDEX stopping Web Workers,
show all

Peter Lubbers - Pro HTML 5 Programming

Create successful ePaper yourself

Delete template?

Save as template?