Input Field counter and field should change colours and text

Hi —

I am currently trying to create the ultimate input-field for a wireframe.

What I am trying to do:

A counter should count down from a set amount (lets say 100). The Counter, in the untouched state, shows: “100 max”.

If the user inputs a character the counter should say “99 left”.

If user inputs more than 100 (lets say 120) characters the counter should say “-20 left” — this counter-text and the border of the input field should then become red.

Is there an easy way to do this? I am pretty new to axure and have no idea how to use most of the actions or how to work with variables.

I tried something from another post (attachment) but I have no Idea how to tweak this to fit my needs.

Counter-Validation Problem.rp (47.9 KB)

@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.

Thank you very much. That helped a lot.

@mbc66 please do you have any solution to this problem.

[

Validate Text Area Widget](Validate Text Area Widget)

Axure RP 8

advanced-prototyping

Axure RP 8

advanced-prototyping

1

/

1

jamesorior

1h

I am trying to validate a text area widget

for example I type text in this format into the text area and it worked fine

Working format
SELECT * FROM Products WHERE Price BETWEEN 10 AND 20;

But I want to achieve this line break structure
SELECT * FROM Products
WHERE Price BETWEEN 10 AND 20;

I tried using 2 separate text field like this
Text field 1: SELECT * FROM Products
Text field 2: WHERE Price BETWEEN 10 AND 20;
This works (But I don’t want this) as I will be using tab and its not natural way of typing an SQL Query

I want to be able to type in all the SQL Query in the text area as separate line like this even if it is 20 lines

SELECT * FROM Products
WHERE Price BETWEEN 10 AND 20;

Basically I want to achieve this type of structure using only the text area

A Basic Query Structure Looks Like This

SELECT field1 [,“field2”,etc]
FROM table
[WHERE “condition”]
[GROUP BY “field”]
[ORDER BY “field”]

Extra if possible on text change I want to Set text colour of the following( "SELECT, FROM, WHERE, GROUP BY, ORDER BY etc)

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.