Hi
I have the following requirements for developing an SSN field:
1) Allow the user to view a three part SSN field with the "-" character in between, so that the user does not have to bothered into typing that.
2) I type the first three numbers of the SSN field. The 4th number of the SSN field I type in should automatically be typed in the next field (another xforms:input)
and so on for the next field as well
Right now,
Well, I tried to apply these to an SSN field with imperfect results.
I expect the following behaviour.
I type in the first field of SSN as a three digit number and because of xforms:maxLength=3 it will not let me type anything more than 3 characters.So far so good.
For example, if I type in 123 in the first input field box and then I type in 4 (and there is this second input field box beside the first one with the appropriate - betweeen them ), the 4 should automatically be typed in the second box.
But right now this does not happen. The '4' that I type in is not typed into the next box and instead the next character "5" maybe typed in (into the next box).
So the autotabbing happens, the cursor is placed in the next field (because of a setfocus ) but the right numbers are not placed into the appropriate fields.
Any suggestions on how I can make this work.
I tried the following code:
<xforms:bind nodeset="instance('taskoutput')/fe:SSN/fe:part1" id="test1" type="xs:integer" constraint="matches(.,'^([0-6]\d{2}|7[0-6]\d|77[0-2])') and (string-length(.) = 3)" />
<xforms:bind nodeset="instance('taskoutput')/fe:SSN/fe:part2" type="xs:integer" constraint="matches(.,'^[0-9]{2}$')"/>
<xforms:bind nodeset="instance('taskoutput')/fe:SSN/fe:part3" type="xs:integer" constraint="matches(.,'^[0-9]{4}$')"/>
---------------------------------------
<xforms:input ref="instance('taskoutput')/fe:SSN/fe:part1" bind="test1" incremental="true" id="firstThreeDigitPart" xxforms:maxlength="3" navindex="1">
<xforms:setfocus ev:event="xforms-value-changed" control="secondTwoDigitPart" if="string-length(.) eq 3 and . > 0" />
<xforms:label>Arrestee SSN: </xforms:label>
<xforms:alert>The first field in an SSN field must be in the range 000-772</xforms:alert>
<!-- xforms:action ev:event="xforms-invalid">
<xforms:message level="modal">
Please enter a valid three digit number for this SSN field in the range 000-772
</xforms:message>
</xforms:action -->
<!-- xforms:message ev:event="xforms-help" level="modal">
Specify first three digits of SSN in the range 000-772
</xforms:message -->
<xforms:message ev:event="xforms-hint" level="modal">
What are the first three digits of this Arrestee's SSN
</xforms:message>
</xforms:input>
<xforms:output ref="instance('taskoutput')/fe:SSN/fe:separator">
<xforms:label></xforms:label>
</xforms:output>
<xforms:input ref="instance('taskoutput')/fe:SSN/fe:part2" incremental="true" id="secondTwoDigitPart" xxforms:maxlength="2">
<xforms:setfocus ev:event="xforms-value-changed" control="lastFourDigitPart" idref="firstThreeDigitPart" if="string-length(.)=2 and . > 0" />
<xforms:label></xforms:label>
<xforms:alert>
The second field in an SSN field must be two digits long in the range 00-99
</xforms:alert>
<!-- xforms:action ev:event="xforms-invalid">
<xforms:message level="modal">
A maximum of 2 digits allowed
</xforms:message>
</xforms:action -->
</xforms:input>
<xforms:output ref="instance('taskoutput')/fe:SSN/fe:separator">
<xforms:label></xforms:label>
</xforms:output>
<xforms:input ref="instance('taskoutput')/fe:SSN/fe:part3" incremental="true" id="lastFourDigitPart" xxforms:maxlength="4">
<xforms:label></xforms:label>
<xforms:alert>The third field in an SSN field must be two digits long in the range 0000-9999</xforms:alert>
<!-- xforms:action ev:event="xforms-invalid">
<xforms:message level="modal">
A maximum of 4 digits allowed
</xforms:message>
</xforms:action -->
</xforms:input>
----------------
Any help is appreciated. Thanks
ilango
I notice that you're trying
I notice that you're trying to use the 'matches()' XPath function which is XPath 2 which I don't think is supported and maybe is causing some strange behaviour. Anyway, the form below achieves what you require I think but uses an inline schema to define the pattern.
Tested with formsPlayer 1.6.1023.0.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:js="http://www.formsplayer.com/inlineScript" xmlns:fp="urn:formsplayer.com" > <head> <title></title> <object id="formsPlayer" classid="CLSID:4D0ABA11-C5F0-4478-991A-375C4B648F58"> <strong>formsPlayer has not loaded.</strong> </object> <?import namespace="xf" implementation="#formsPlayer" ?> <style type="text/css"> xf\:label { width : 150px; } .hidden_label { display : none; } xf\:group, xf\:output { display : block; margin-bottom : 10px; } .valid { border : 2px solid #FFF; } .invalid { border : 2px solid red; } .ssn_field { margin-right : 3px; } .ssn_field .input-value { width : 40px; } </style> <!-- Inline XML schema to define/validate the input for inst-ssn You could do the min/max values in xf:bind/@constraint but may as well keep all validation in one place. --> <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" id="inline_schema"> <xsd:element name="root"> <xsd:complexType> <xsd:sequence> <xsd:element name="ssn" type="Type_SSN" /> <xsd:element name="ssn_area_number" type="Type_SSN_Area_Number" /> <xsd:element name="ssn_group_number" type="Type_SSN_Group_Number" /> <xsd:element name="ssn_serial_number" type="Type_SSN_Serial_Number" /> </xsd:sequence> </xsd:complexType> </xsd:element> <xsd:simpleType name="Type_SSN"> <xsd:restriction base="xsd:string"> <xsd:pattern value="[0-9]{3}-[0-9]{2}-[0-9]{4}" /> </xsd:restriction> </xsd:simpleType> <xsd:simpleType name="Type_SSN_Area_Number"> <xsd:restriction base="xsd:integer"> <xsd:pattern value="[0-9]{3}" /> <xsd:maxInclusive value="772" /> <xsd:minInclusive value="0" /> </xsd:restriction> </xsd:simpleType> <xsd:simpleType name="Type_SSN_Group_Number"> <xsd:restriction base="xsd:integer"> <xsd:pattern value="[0-9]{2}" /> <xsd:maxInclusive value="99" /> <xsd:minInclusive value="0" /> </xsd:restriction> </xsd:simpleType> <xsd:simpleType name="Type_SSN_Serial_Number"> <xsd:restriction base="xsd:integer"> <xsd:pattern value="[0-9]{4}" /> <xsd:maxInclusive value="9999" /> <xsd:minInclusive value="0" /> </xsd:restriction> </xsd:simpleType> </xsd:schema> <!-- Model for data input, backed by inline schema for validation --> <xf:model id="mdl-ssn" functions="fp:HTMLSerialise" schema="#inline_schema"> <xf:instance id="inst-ssn"> <root xmlns=""> <ssn /> <ssn_area_number /> <ssn_group_number /> <ssn_serial_number /> </root> </xf:instance> <!-- @calculate the value of the full SSN --> <xf:bind nodeset="/root"> <xf:bind nodeset="ssn" calculate="concat(../ssn_area_number, '-', ../ssn_group_number, '-', ../ssn_serial_number)" /> </xf:bind> </xf:model> </head> <body> <p> Social security number (SSN) input with auto focus between fields. </p> <p> According to <a href="http://www.usrecordsearch.com/ssn.htm">this site</a> SSNs are commonly displayed in the format AAA-GG-SSSS. </p> <p> ... The first three-digit field is called the "area number". The central, two-digit field is called the "group number". The final, four-digit field is called the "serial number". ... </p> <xf:output ref="/root/ssn"> <xf:label>Calculated SSN</xf:label> </xf:output> <xf:group id="grp_input" ref="/root"> <xf:label>Social security no.</xf:label> <!-- SSN area number --> <xf:input id="inp_area_no" ref="ssn_area_number" incremental="true" class="ssn_field"> <xf:label class="hidden_label" /> <xf:hint>Area number SSN field must be in the range 000-772</xf:hint> <!-- Truncate the value if it exceeds the length we require --> <xf:action ev:event="xforms-value-changed"> <xf:setvalue if="string-length(/root/ssn_area_number) > 3" ref="/root/ssn_area_number" value="substring(/root/ssn_area_number, 1, 3)" /> </xf:action> <xf:action ev:event="xforms-valid"> <xf:setfocus control="inp_group_no" /> </xf:action> </xf:input> - <!-- SSN group number --> <xf:input id="inp_group_no" ref="ssn_group_number" incremental="true" class="ssn_field"> <xf:label class="hidden_label" /> <xf:hint>Group number SSN field must be two digits long in the range 00-99</xf:hint> <xf:action ev:event="xforms-value-changed"> <xf:setvalue if="string-length(/root/ssn_group_number) > 2" ref="/root/ssn_group_number" value="substring(/root/ssn_group_number, 1, 2)" /> </xf:action> <xf:action ev:event="xforms-valid"> <xf:setfocus control="inp_serial_no" /> </xf:action> </xf:input> - <!-- SSN serial number --> <xf:input id="inp_serial_no" ref="ssn_serial_number" incremental="true" class="ssn_field"> <xf:label class="hidden_label" /> <xf:hint>Serial number SSN field must be two digits long in the range 0000-9999</xf:hint> <xf:action ev:event="xforms-value-changed"> <xf:setvalue if="string-length(/root/ssn_serial_number) > 4" ref="/root/ssn_serial_number" value="substring(/root/ssn_serial_number, 1, 4)" /> </xf:action> </xf:input> </xf:group> <!-- Display complete instance --> <xf:output value="fp:HTMLSerialise(instance('inst-ssn'))"> <xf:label>inst-ssn contents</xf:label> </xf:output> </body> </html>it works!
Hi
Thanks very much. It works nicely.
ilango