XRX/Server Field Validation

Motivation
You have data in a form field that you want to validate on the server. For example, you want to validate that a zip code or postal code is valid. You want to perform the validation on the server, because loading the full data set into the web browser for validation would slow down the form loading time.

Method
Sending data to a remote server and getting the results back without reloading an entire form is a central feature of XForms. The beauty of XRX is that this can be done without writing a single line of JavaScript. We will demonstrate the technique using several components.


 * 1) We will create a server-side RESTful component that will return a simple "OK" message if the field passes the server side checks or an error message if it fails.
 * 2) We will add an action to the field that will detect if the value in that field changes.  This can be done for each character the user types or when the user tabs out of the field.
 * 3) This action will trigger a submission to the server and return the result into the model.  Both the input parameters to the RESTful service and the results of the service will be stored in separate instance in the model.

Sample Code
In this example we will check to see if data entered is a valid ZIP Code (a US postal code).

Here is the sample code from the form:

Input Field
In the following code we add an XForms action to the input. The event we trigger on is the DOMFocusOut which is triggered when the users tab out of the field. We perform two actions.


 * 1) We put the value in the outgoing instance using the xf:setvalue function.
 * 2) We trigger the RESTful web service.

Submission Element
Here is the additional submission element that is added to the XForms model. The method is HTTP GET which adds all of the parameters in our outgoing "zip-check" instance to the end of the URL. The action is the name of the XQuery script. In this case I use a relative path that is common if the XQuery check is in the same collection as the XQuery script that generates the XForms application.

Instances for Outgoing Value and Incoming Results
 

This will cause the results of the Query to be URL paramters.

zip-check.xq?zip-code=55426

Full XForms Example
    

 

 Zip Code: Five digit zip code.   <xf:send submission="zip-check-submission"/> </xf:action> </xf:input>

<xf:output ref="instance('zip-check-results')/message"> <xf:label>Response:</xf:label> </xf:output>

<xf:trigger submission="zip-check-submission"> <xf:label>Check Zip Code</xf:label> </xf:trigger>

Discussion
This technique can be employed even if the data sets are small or the validation checks simple. The form designer must consider the trade-off between storing a validation rule in the form and the overhead of going to and from a service. There are several variations of this pattern. One variation is using the "suggest" pattern to suggest one of several values as the user enters data. In this cast each character that changes may trigger a new list of possible values.