Text field format restrictions and conditions

newbie-question
#1

Hello,

I am looking to restrict what the user can input into a text field based on specific format of alpha/numeric characters. I would also like to introduce hyphens as separators.

Field format: NNNN-AA-NNNNN

I require the input to be 4 numeric characters, followed by 2 alpha characters, and another 5 numbers.
I would like to prevent the user from entering a numeric character if alpha is expected, and vice versa. I would also like to auto-populate the hyphens when the user enters the 4th and 6th characters (and for them to be auto-deleted when the users backspaces).

Any help would be appreciated!

#2

I recommend using the Text Field’s Key Up event, which is fired each time a keyboard key is released. You might be tempted to use Text Changed but you will be programmatically changing the text value when insert dashes, and likely when you restrict input (e.g., if user tries to enter ‘A’ first, you’ll want to delete that char.) Depending on what kind of precise control you want, you could use or combine use of the Key Down event.

You’ll need to set up some conditional cases to handle each of your constraints.

Psuedo-code looks like this:
//where “This” refers to the widget–your text field
// [[This.slice(-1)]] is an expression that returns the last char of the text value in the text field
// [[This.slice(0, -1)]] is an expression that strips the last char of the text value

Key Up
Case 1: auto-delete dashes
If [[This.slice(-1)]] equals “–”
Set value of This to [[This.slice(0, -1)]]

Case 2: ensure first 4 chars are numeric
Else if length of This is less than or equal to 4 and value of [[This.slice(-1)]] is not numeric
Set value of This to [[This.slice(0, -1)]]

Case 3: insert dash after 4th char
Else if length of This is equal to 4
Set value of This to [[This]]–

Case 4: ensure alpha for next 2 chars
Else if length of This is less than or equal to 7 and value of [[This.slice(-1)]] is not alphabetical
Set value of This to [[This.slice(0, -1)]]

Case 5: insert dash after 7th char (4+dash+2)
Else if length of This is equal to 7
Set value of This to [[This]]–

Case 6: ensure next 5 chars are numeric
Else if length of This is less than or equal to 13 and value of [[This.slice(-1)]] is not numeric
Set value of This to [[This.slice(0, -1)]]

Case 7: ensure only 13 chars (4+dash+2+dash+5)
Else if length of This is greater than 13
Set value of This to [[This.slice(0, -1)]]

As I recall, “numeric” logically includes periods and maybe commas. If you need to enforce true digits, I think you have to use the “is one of” option in the condition builder and manually type in each digit as a set.

If this doesn’t make sense, you don’t have experience creating conditional logic, or whatever, reply and I’ll try to build you a demo. Or, if you get close but something not working right, you can post your attempt here and I (or other forum folk) can likely fix it. Best of luck!

#3

Thanks for the suggestion @mbc66
I am running into a slight issue though if I have a hint text set for the field and the first character someone enters is not acceptable in the format. Simple example is a phone number field.
If the user enters a character instead of number as the first character, the field does not reset to blank but instead to the hint text and the cursor is placed at the end of the hint text. see example file attached.phone number and hint text.rp (48.1 KB)

#4

Sorry, I don’t have a license for Axure 10.

In general, if you assign hint text to a Text Field widget, then that hint text will be shown whenever the field’s text value is empty. I think the browser controls the hint styling, cursor styling, whether to show cursor or not, and where to put the cursor, but I agree putting the cursor at the end of the hint text is not good.

There is an option to hide the hint text when user types something, or on focus–when the user clicks on it, tabs to it, or your code selects or focuses that widget (at least in RP9; it is labeled “Hide After” with default of “Typing” and option of “Focus”) Setting this to “Focus” might solve your problem. If that setting alone doesn’t do it, then maybe try adding a Set Focus action to your code that evaluates the field’s value.

If that doesn’t work, you could try creating a dynamic panel (dp) out of the text field, duplicate the state, then remove the hint text from the text field in the second state. Use this second state for cases in which you need an empty field with no hint. You can use the Text Changed event of each text field to automatically set the text of the other field (in the other dp state) to match the currently shown text field. For example, Set Text of MyTextField1 to "[[This.text]]" . In this way, whenever you change the dp state, the text fields should match.

Another approach would be to remove the hint text from the Text Field widget and recreate it in a separate Rectangle widget.

  • Make the rectangle the same size as your text field and place it directly in front of the text field.
    (I’ll name it, “MyTextHint” in this example.)
  • Set the text style to match your existing hint text–or however you want it to look.
  • Style the rectangle with no border and no fill.
  • Assign a Click or Tap event for this MyTextHint rectangle, with actions of:
    Hide This
    Set Focus on MyTextField
  • Assign a Lost Focus event for MyTextField with action of:
    If length of This is less than or equal to "0" Show MyTextHint
    • You can add another condition(s) to this case to test that the text field is not in error (such as a number instead of alpha char.)

I’ve used this approach to control the styling of the hint text and enable dynamic changing of the hint text, for example, based on previous user actions or system states.

#5

Thanks for responding. And no worries if you don’t have Axure 10.
I did try both the settings for hint text to hide: ‘on focus’ and ‘after typing’.
Adding a set focus action after the unacceptable text is cleared was a suggestion I read someone else mention and I can confirm that it is a valid solution. Thank you so much.