For this example,
it looks like Figure 11-21.
Figure 11-21. E-mail validator
230
CHAPTER 11
Place this tag in the Source view of your MXML editor before the mx:Panel tag. It consists of an id (so
that we can call on it later), a source (the component you want to check), and a property (the property
of the component you want to check).
25. Add this MXML tag now and run the application.
In this example, if you enter some text that is not in the format of an e-mail address into this field, it
will be highlighted in red (Figure 11-22).
Figure 11-22. An error in e-mail formatting
will be highlighted.
Hover your cursor over the component to see a suggested fix for the error (Figure 11-23).
Figure 11-23. E-mail error explained
231
CREATING FORMS: THE ???WILL FLEX FOR FOOD??? REGISTRATION PAGE
26. Add two more similar labels and TextInput components for the address and postal code
(Figure 11-24).
27. The postal code is another example of a field that must be validated. Give this TextInput an ID
of zipAndPostalCode. The validation tag for the postal code is similar to the one created for the
e-mail, but with a bit extra (Figure 11-25).
Figure 11-24. Adding the address and postal code
Figure 11-25. Postal code validator
You can see in Figure 11-25 that the source is set to be the id of the TextInput component, and the
property is set to the text property of that component. This is the same overall structure we used for
the e-mail. But since there are different kinds of postal code formats depending on the country, we
added the domain field to include the ones that we want to work with.
Pages:
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164