XForms/Server-Side Field Validation
Appearance
< XForms
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>