Jump to content

XForms/Server-Side Field Validation

From Wikibooks, open books for an open world

Motivation

[edit | edit source]

Steps

[edit | edit source]

Step 1: Add instances for outgoing and incoming data

[edit | edit source]
<!-- store the outgoing data for the invalid e-mail check -->
<xf:instance id="email-out">
   <data xmlns="">
      <email></email>
   </data>
</xf:instance>


<!-- place to store the results of an invalid e-mail check -->
<xf:instance id="email-check-results">
   <data xmlns=""/>
</xf:instance>

Step 2: Add a submission element to the model

[edit | edit source]

The submission element connects the "field changed" event to a service on the server.

<xf:submission id="email-check" method="get" action="email-check.xq" 
           ref="instance('email-check')" 
           replace="instance" instance="email-check-results" />

Step 3: Add an action to your input

[edit | edit source]
<xf:input ref="email" >
    <xf:label>Email: </xf:label>
    <xf:hint>This field must contain a valid email format.</xf:hint>
    <xf:action ev:event="xforms-value-changed">
           <!-- copy from your "save-data" into the outgoing instance -->
           <xf:setvalue ref="instance('email-out')/email" value="instance('save-data')/email"/>
           <xf:send submission="email-check"/>
    </xf:action>
</xf:input>

Step 4: Add a group that displays errors if the results are invalid

[edit | edit source]
<xf:group ref="instance('email-check-results')/message[@class='error']">
     <div class="field-warn"><xf:output value="instance('email-check-results')/message"/></div>
</xf:group>

Step 5: Create a server-side REST GET service that returns true/false

[edit | edit source]
If there are no errors just return <ok/>

If there are errors return
<message type="error">Invalid e-mail format</message>