@benjaminbetz,
I’ve had to do similar in the past and I know this has come up several times through the years here. I did a forum search for “character count” and came up with a number of solutions. This one, Twitter style character count, is simple and works well.
Your start is right on track…and maybe you were using the same example as a template… Your second Case statement for the input field has an “Else if…” and that would need to be converted to just “If…” because it follows and “If True…” statement, meaning it would never be called. (For some reason, the default mode for new cases is “Else if” which I find I need to change at least 80% of the time, so I’m in the habit of always right-clicking a new case and selecting “Toggle IF/ELSE IF”.) However, the rest of our conditions can be “Else If” statements because they test the length of the input string which is either one length or another.
Following the basic character counting code from the example above, and applying it to your conditions, here is a solution, and the Text Field code in it:
Counter-Validation Problem Solved.rp (49.9 KB)
Note the conditions are only testing the length of the value of widget This–in other words, “how long is the string in this input field”? --No need to worry about what keys were pressed, Backspaces, Deletes, etc. Just let the input field and browser take care of the string. You only care about its length–how many characters–and that you need to do something different when the length is 0, more than 0, and then when it is more than 100.
I set the “Selected” style for your Number Counter and max widgets to a red font color (and bold), and red line color for the Input Field BG widget (also red shadow for a “glow” effect–remove that if you don’t like it.) Axure does not provide actions for directly changing colors or other styles, so this is a standard way to handle color and other style changes if there are only two (colors in your case.) You can use “Disabled” for a third style, but if there are more than that, using a dynamic panel with multiple states is the way to do it (like in example thread linked above.) The Case statements should be fairly self-explanatory for controlling when to change colors by selecting/deselecting widgets.
Also, FYI, you are using a Text Field widget, which is limited to one line of text only, no matter how long–and you may prefer that for your needs. Text Area widgets can be vertically sized as well, for paragraph-style input.
