xforms password confirm password

I have the typical password, confirm password layout with xforms: My instance is the following:

<data>
  <password/>
  <newPassword/>
  <confirmPassword/>
</data>

and the inputs are like these:

 <xf:secret ref="password">
        <xf:label>Old PAssword</xf:label>
   </xf:secret>

   <xf:secret ref="newPassword">
        <xf:label>New Password</xf:label>
   </xf:secret>
   <xf:secret ref="confirmPassword">
        <xf:label>Confirm Password</xf:label>
   </xf:secret>
   <div>
       <xf:submit submission="test">
            <xf:label>Change Password</xf:label>
       </xf:submit>
   </div>

I don't know how exactly validate and match the newPassword with confirmPassword, I know its something using <xf:bind tag but I haven't found how to verify equality between nodes. Please help!

Solution

You can indeed use xf:bind to apply constraints. Just add the following lines to your xf:model:

<xf:bind nodeset="password" required="true()" constraint=". != ''"/>
<xf:bind nodeset="newPassword" required="true()" constraint=". != ''"/>
<xf:bind nodeset="confirmPassword" required="true()" constraint=". = ../newPassword"/>

That will add required markers behind all three input fields, make sure all three fields are filled, and last two have to be the same. You could add a constraint that password and newPassword can't be the same, by adding it with an 'and' to the constraint of newPassword.

Personally, I like to get a bit more feedback. These constraints just cause indicators to appear behind each field, without any further info. It would be nicest if you could have a message to be shown at the moment you are trying to submit the information. But that involves xforms event handling, and I am not experienced enough myself to tell you how. There is an xforms-submit-event, that you might be able to catch somehow, and act upon. But most common problem is that once a submit is being hit, you have no or only very little possibility of showing feedback to the user, before things are being sent to the server.

Another option is to show conditional messages using xf:output. If you add incremental="true" attributes to your xf:secret inputs, these will be refreshed at each keystroke. Just use a value attribute with a choose expression on an xf:output element. Something like this:

<xf:output value="choose(password = '' or newPassword = '' or confirmPassword = '', 'Please enter current password, new password, and confirmation of new password', '')"/>

<xf:output value="choose(newPassword = '' or newPassword = confirmPassword, '', 'new password, and confirmation do not match!')"/>

You can also add some pretty printing around them if you like. Other ways of doing dynamic styling is using xf:group, but I will leave that as an exercise for you.

Finally, make sure to check all values at server-side as well, just to be sure no one is cheating.

HTH!