Auto advance SSN fields

#1

I trying to mockup 3 SSN fields in a proto. When the user has entered the right number of digits, I want the focus to advance to the next field. So, after user types in a 3rd number in first field, the focus goes to the next field. After they type in a 2nd number in the 2nd field, focus advances to the 3rd field.

I thought I would use the Text Changed case, but I cannot figure out what settings within it that let’s me take action based on the number of digits/characters entered into a field.

#2

You can use the Text Changed event. Just include at least one conditional case that tests the length of the text value, where “length of value” refers to the number of characters. if the value has the correct length (e.g., 3 digits for first SSN field) then use the Focus action to set focus on the next Text Field widget.

To do this, click the “Enable Cases” button for the event to bring up the Condition Builder dialog. Then click “Add Logic”, then click in the first field with “value” (by default), then select “length of widget value” as the criterion.

Here is a demo with some other validation and error handling cases added.

SSN validation.rp (55.4 KB)

Some notes…

  • It is possible to set the input type of a Text Field widget to “numeric” which seems like a good idea, except it basically renders the field unusable, as the number value and changes don’t trigger Axure events, so validation becomes difficult if not impossible. I’ve found it is better to keep the default and just test if the value of a field contains only numbers.
    • Also, some characters are considered numeric: period, comma, space but not part of “whole numbers” as in an SSN. So, this is handled accordingly.
    • This demo simply removes the last character of the field’s value if it is not a whole number. An alternative is to show an error message explaining it and how to fix it.
  • You can assign a “submit button” to a Text Field widget, which means when the Enter key is pressed it will fire that button’s Click or Tap event.
    • I created one submit button, named “ssnValid” and assigned it to all three Text Field widgets. It’s Click or Tap has a series of cases that tests each input field and handles errors in each. This button is actually a checkmark icon with default style of no border, no fill (so not visible, but also not technically hidden–which would mean it would not be clickable and thus not functional.) This checkmark has a selected style of a green fill, so it shows up when all three input fields are valid.
  • The end result is the user can enter a value in any of these fields (where only digits are accepted) and the focus automatically shifts to the next field when correct number of digits entered. Or, they can press the Enter or Tab keys to “move forward”. If any field is invalid, it gets selected–with a selected style of “red” to indicate an error. When all 3 fields are correct, a green checkmark appears to indicate the entire SSN is valid.
#3

Excellent, thanks so much for the reply and the rp file. Greatly appreciated!

Mike Dripps