XForms Basics, Part 2 - Not My Type (
Page 5 of 6 )
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:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/xforms/cr">
<head>
<!-- define the form model -->
<xforms:model id="enter">
<xforms:instance>
<user xmlns:xsi=
"http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd=
"http://www.w3.org/2001/XMLSchema">
<name
xsi:type="xsd:string" />
<age
xsi:type="xsd:integer" />
<dob
xsi:type="xsd:date" />
<height
xsi:type="xsd:float" />
<weight
xsi:type="xsd:decimal" />
<immunizaton
xsi:type="xsd:boolean" />
</user>
</xforms:instance>
</xforms:model>
<basefont face="Arial">
</head>
<body>
<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…
<xforms:model id="enter">
<xforms:instance>
<user
xmlns:xsi=
"http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd=
"http://www.w3.org/2001/XMLSchema">
<name xsi:type="xsd:string" />
<age xsi:type="xsd:integer" />
<dob xsi:type="xsd:date" />
<height xsi:type="xsd:float" />
<weight xsi:type="xsd:decimal" />
<immunizaton xsi:type="xsd:boolean" />
</user>
</xforms:instance>
</xforms:model>
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.
