XForms/Facet Validation

Motivation

XML Schemas contain a large amount of data element constraint information other than just the data type. These restrictions on a specific data type are called "facets". Different data types have different types of facets. For example strings may have minimum and maximum length values and integers may have minimum and maximum numeric values.

This program demonstrates how XForms can validate a data set based on the facets within and XML Schema.

Warnings

Note: This program does not run under the FireFox 0.6 extension.

The X-Smiles browser was used to demonstrate this program.

Screen Image

This screen image was taken from the X-Smiles implementation of XForms.

Facet Validation with X-Smiles

Note that the second field is not at least three characters long so the field is invalid and the background it set to pink according to the CSS style for invalid fields.

XML Schema (schema.xsd)

Here is a simple XML Schema with four strings. The first one is only allowed to be two characters long. The second must have a minimum length of three characters. The third string must not be over five characters long and the fourth one must be between five and seven characters long to be valid.

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
   <xs:element name="Data">
      <xs:annotation>
         <xs:documentation>A demonstration of XML Schema string facets.</xs:documentation>
      </xs:annotation>
      <xs:complexType>
         <xs:sequence>
            <xs:element name="string-length-2">
               <xs:simpleType>
                  <xs:restriction base="xs:string">
                     <xs:length value="2"/>
                  </xs:restriction>
               </xs:simpleType>
            </xs:element>
            <xs:element name="string-min-3">
               <xs:simpleType>
                  <xs:restriction base="xs:string">
                     <xs:minLength value="3"/>
                  </xs:restriction>
               </xs:simpleType>
            </xs:element>
            <xs:element name="string-max-5">
               <xs:simpleType>
                  <xs:restriction base="xs:string">
                     <xs:maxLength value="5"/>
                  </xs:restriction>
               </xs:simpleType>
            </xs:element>
            <xs:element name="string-5-7">
               <xs:simpleType>
                  <xs:restriction base="xs:string">
                     <xs:minLength value="5"/>
                     <xs:maxLength value="7"/>
                  </xs:restriction>
               </xs:simpleType>
            </xs:element>
         </xs:sequence>
      </xs:complexType>
   </xs:element>
</xs:schema>

Sample Instance (instance.xml)

<?xml version="1.0" encoding="UTF-8"?>
<Data
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:noNamespaceSchemaLocation="schema.xsd">
   <string-length-2>MN</string-length-2>
   <string-min-3>abcd</string-min-3>
   <string-max-5>abcd</string-max-5>
   <string-5-7>abcdef</string-5-7>
</Data>

Sample Program

The following program loads both the XML Schema and initial instance data from two external files (schema.xsd and instance.xml). The initial data in this example is valid but you can change the data to test the validation.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:xf="http://www.w3.org/2002/xforms" 
  xmlns:xs="http://www.w3.org/2001/XMLSchema" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <head>
      <title>Facet validation using X-Smiles.</title>
      <style type="text/css">
      @namespace xf url("http://www.w3.org/2002/xforms");
         xf|input {
            /* display: table-row; */
            line-height: 2em;
         }
         
         xf|label {
            /* display: table-cell; */
            text-align: right;
            font-family: Ariel, Helvetica, sans-serif;
            font-weight: bold;
            font-size: medium;
            padding-right: 5px;
            width: 130px;
         }
         
         *:required {
             background-color: yellow;
         }
         
         *:invalid  {
            background-color: pink;
         }
      </style>
      <xf:model id="test" schema="schema.xsd">
         <xf:instance src="instance.xml" />
      </xf:model>
   </head>
   <body>
      <xf:group model="test" nodeset="/Data">
         <p>
            <xf:input ref="string-length-2" incremental="true">
               <xf:label>Length exactly 2:</xf:label>
            </xf:input>
         </p>
         <p>
            <xf:input ref="string-min-3" incremental="true">
               <xf:label>Length 3 or more:</xf:label>
            </xf:input>
         </p>
         <p>
            <xf:input ref="string-max-5" incremental="true">
               <xf:label>Length 5 or less:</xf:label>
            </xf:input>
         </p>
         <p>
            <xf:input ref="string-5-7" incremental="true">
               <xf:label>Length 5 to 7:</xf:label>
            </xf:input>
         </p>
      </xf:group>
   </body>
</html>

The two lines that load the XML Schema and instance data are:

<xf:model id="test" schema="schema.xsd">
      <xf:instance src="instance.xml" />
</xf:model>

Also note that the input fields have the incremental attribute set to true. This allows character-by-character validation. The form is revalidated with each key stroke.

Discussion

Next Page: Dynamically Load JavaScript | Previous Page: Validate with schema types
Home: XForms