Description
This feature should be used when there is a character min/max requirement.
- Should work for both input and textarea and be open for use with other elements.
- This will never limit the amount of characters going into a input, it will only let the user know, and by form validation prevent submitting the form.
- This is very likely part of the form-control validation feature, eventually initialized on uui-input and uui-textarea and hooked into the validation system. Thereby displayed through the validation message.
General
When the requirements are held, the message should only be shown when input has focus.
When only a maximum limitation:
below 80% of the max: "Maximum 100 characters"
between 80%-100%: "Maximum 100 characters, 18 characters left"
above 100%: "Maximum 100 characters, 12 too many. (red text color)
When only a minimum limitation:
when no characters: "Minimum 100 characters"
1-100: "Minimum 100 characters, missing 24" (red text color)
above the min: "Minimum 100 characters"
When both a minimum and maximum limitation:
when no characters: "100-200 characters"
below the min: "100-200 characters, missing 24" (red text color)
in a good state: "100-200 characters"
above min but between 80%-100%: "Maximum 100 characters, 18 characters left"
above 100%: "Maximum 100 characters, 12 too many. (red text color)