In the first part of this series, I gave you a quick introduction to the newly-released XForms 1.0 specification, by explaining the fundamental concepts of the XForms model. Now that you know the basics, find out how to submit XForms data to a server-side script or save it to a local client file, and also read about how XForms can integrate with XML Schemas to simplify input validation.
Speak to any Web developer, and they're sure to complain about the need to write complex JavaScript code to carry out elementary data validation on form input. With XForms, they are no longer hostage to JavaScript – Xforms is closely integrated with XML Schema, and can use XML Schema datatypes to perform both simple and complex form validation. Take a look at the next example:
<font size="+1">So you wanna join the Army?</font> <br /><br />
<!-- form controls --> <xforms:input id="txtname" model="enter" ref="/user/name"> <xforms:label>Name</xforms:label> <xforms:hint>Enter your name</xforms:hint> <xforms:alert>Haven't you got a name, mate?</xforms:alert> </xforms:input>
<xforms:input id="txtage" model="enter" ref="/user/age"> <xforms:label>Age</xforms:label> <xforms:hint>Enter your age in years</xforms:hint> <xforms:alert>Can't you read? Tell me your age!</xforms:alert> </xforms:input>
<xforms:input id="txtdob" model="enter" ref="/user/dob"> <xforms:label> Date of birth </xforms:label> <xforms:hint> Enter your date of birth </xforms:hint> <xforms:alert> You can forget your birthday gift, brother! </xforms:alert> </xforms:input> <xforms:input id="txtheight" model="enter" ref="/user/height"> <xforms:label>Height</xforms:label> <xforms:hint> Enter your height in feet and inches </xforms:hint> <xforms:alert> Don't have a measuring tape, do you? </xforms:alert> </xforms:input>
<xforms:input id="txtweight" model="enter" ref="/user/weight"> <xforms:label>Weight</xforms:label> <xforms:hint>Enter your weight in pounds</xforms:hint> <xforms:alert>Come on fatso, 'fess up!</xforms:alert> </xforms:input>
<xforms:input id="boolimmunization" model="enter" ref="/user/immunization"> <xforms:label>Have you been immunized against major diseases?</xforms:label> <xforms:hint>Enter your immunization status</xforms:hint> <xforms:alert>Don't lie, we have syringes with large needles!</xforms:alert> </xforms:input> </body> </html>
At first glance, the above example looks a lot like the examples we have discussed so far. But a closer inspection of the model reveals a subtle difference…
For starters, I have two new namespaces, one for XML Schema and the second for the XML Schema instance. Both these are required for the new features that I'm going to introduce in this example.
Next, take a closer look at the definition of the XForms model. You'll see that each element contains a new "xsi:type" attribute. This attribute, which references datatypes from the XML Schema namespace (hence the "xsd:" namespace identifier) makes it possible to easily use those datatypes within XForms. Once datatypes have been defined in this manner, and links to the form controls have been set up via "ref" attributes, the XForms processor will generate an error if the data entered into a field does not match the datatype associated with it in the form model.
How is this error handled? Simple! With the new <xforms:alert> element; it can be used to display control-specific errors or alerts. Take a look at this snippet, which illustrates:
<xforms:input id="txtage" model="enter" ref="/user/age"> <xforms:label>Age</xforms:label> <xforms:hint>Enter your age in years</xforms:hint> <xforms:alert> Can't you read? Tell me your age! </xforms:alert> </xforms:input>
Here, if the user does not enter data consistent with the definition for the control, the message specified in the <xforms:alert> field will be displayed.
