Here's one way of many of making sure that user submitted data does not exceed a maximum allowed length (set by the form author) in a form control.

Say there's the scenario that requires you to ensure that when someone comments on your blog post, they do not enter more than 25 characters (you're not looking for detailed feedback on your post!).

The approach demonstrated here is to disable the button the user needs to press to submit their comment unless the text they enter is less than or equal to 25 characters. If they do enter more than that, we disable the button and inform them that they need to shorten their comment. It's also nice to let them know how many characters they have left to enter too.

The form below implements all of the requirements described:

The comment form consists of a few controls. A textarea to allow text to be entered, an output to show how many more characters are able to be entered.

<xf:textarea ref="comment" incremental="true">
    <xf:label>Comment on this article:</xf:label>
    ...
</xf:textarea>
<xf:output ref="state/@chars-remaining"></xf:output>
<span class="substitute-label-text">characters remaining</span>.

The two controls reference some instance data:

...
<data xmlns="">
    <comment></comment>
    <state max-length="25" chars-remaining=""></state>
</data>
...

The 'comment' node is referenced by the textarea control and holds the users input. The 'state/@chars-remaining' attribute is a calculated value referenced by the output control to show how many characters are still able to be input (we'll explain that in a minute). The 'state/@max-length' value is hard-coded and is what sets the maximum allowed length of the users input. It could be changed to a higher or lower value to allow more or less text to be input.

The button that allows the user to submit their short comment is contained in an XForms switch/case element. There are two cases, one to hold the button, one to hold the message to show the user when they've typed too much.

<xf:switch>
    <xf:case id="comment-ok">
        <xf:trigger><xf:label>Post comment</xf:label></xf:trigger>
    </xf:case>
    <xf:case id="comment-disallowed">
         <div class="error-text">Your comment is too long! Please shorten it.</div>
    </xf:case>
</xf:switch>

To switch cases when too much text is entered, we set up a validity constraint on the 'comment' node, using an xf:bind element. This enables us to tell when the control becomes valid/invalid and this means that we can then use the xforms-valid and xforms-invalid events to toggle the two cases on and off.

Firstly the validity constraint for the 'comment' node. This says the node will be valid up until more than the '@max-length' number of characters has been entered:

<xf:bind
    nodeset="comment" 
    constraint="string-length(.) &lt;= ../state/@max-length"
></xf:bind>

then, we use the valid/invalid events by modifying the textarea control markup to toggle the cases:

<xf:textarea ref="comment" incremental="true">
    <xf:label>Comment on this article:</xf:label>
    <xf:toggle ev:event="xforms-valid" case="comment-ok"></xf:toggle>
    <xf:toggle ev:event="xforms-invalid" case="comment-disallowed" ></xf:toggle>
</xf:textarea>

The only unexplained part of the form is the output control that informs us how many characters are still available to be input. I mentioned earlier that this is a calculated value. It's calculated using another xf:bind element with a @calculate attribute. This subtracts the length of the string the user has entered at a particular point from the maximum allowed (state/@max-chars) value.

<xf:bind
    nodeset="state/@chars-remaining" 
    calculate="number(../@max-length) - string-length(../../comment)"
></xf:bind>

Each time the user types a character the @calculate equation gets re-evaluated because of the @incremental="true" attribute that's part of the textarea control. This is important to note as, if the @incremental value was 'false' or the attribute omitted entirely, the equation would only get evaluated once the user had navigated away from the control.

That's pretty much it apart from a bit of CSS that styles the controls colour/appearance. I'm sure you can work that out though! An exercise for the reader might be to modify the form to ensure that not only is there a maximum number of characters entered but also a minimum number too.