Type at least n characters before you can submit the form

Question

This is not a duplicate of this question since that one is about searching.

We have a simple form containing one text area and a submit button.

^{download bmml source – Wireframes created with Balsamiq Mockups}

The user has to type at least 100 characters before she can submit the message. How can we inform the user about this restriction?

Sure, we can inform the user by placing the restriction below the field name. But, since users tend not to read text, we have decided do disable the button until at least 100 characters have been typed. The user still needs to know about this limitation.

How can we solve this in a user-friendly way?

Answer 1

Include the warning ON the disabled button, change the text to like "Send message" at the moment they reach the minimum characters and enable the button.

Answer 2

Requiring a certain amount of characters is not particularly user friendly. Before enforcing such restrictions it might be smart to look for alternatives ( against spam or poor submissions, I assume?)

There could be many instances of valuable feedback/text that are shorter than 100 characters, or people being forced to re-write text just to meet the 100 character requirement.

Disabled Send button: This could introduce doubt, making the user wonder why it is disabled. An improvement on AsheraH's solution would be to inform the user BEFORE interaction takes places. This reduces interaction effort. You could attach the amount of characters to the button unlocking.

Answer 3

Disabled the submit button until the input area has at least 100 characters. Including a label next to the button simply saying something like "(100 character minimum)" is enough for the user.

The button being disabled is going to tell them something is wrong, and the label is giving enough information to let them know what that is.

Answer 4

Copy StackExchange

A similar restriction exists on SE for the comment field. I think it is a high quality solution to your problem and it also aligns with some of the design decisions you've already made.

Information

"Sure, we can inform the user by placing the restriction below the field name."

The field hint describing the character length restriction —"enter at least 15 characters"— is set under the text-box.

Error prevention

"... we have decided do disable the button until at least 100 characters have been typed."

Although The button isn't styled as a disabled control, the user cannot submit a comment until she meets the minimum character length.

Attention

While 'disabled', the button is given a secondary function i.e. to highlight the restriction. When the user clicks the button, the restriction flashes, drawing the user's attention and ensuring the user reads the text.

Progression

The restriction also updates as the user types letting her know when she has met the minimum character length.

I think this updating hint could be improved by including characters after the number. If it's the first time the user is seeing the hint, it may take a moment for her to understand what the number represents.

Answer 5

Hi guys,

I would suggest to indicate the 100-character restriction:

• first, by marking a grey area that fits exactly 100 characters
• second, by explicitly writing that '100 characters required' next to
• a Submit button that will remain disabled until 100 characters are reached.

Hope this helps!

Cheers, Nikos

Answer 6

Put the warning IN the box in greyed out ghostly writing "Please write enough to at least fill this text box".

This writing will disappear as soon as the user starts typing.

Match the size of the text box so that it takes 100 characters, before it starts to scroll.

(Reasoning: trying to guess what constitutes 100 characters is difficult. Users will often focus on just the one point on the screen, particularly in a familiar operation and will ignore written information at the edges of their focus)

Answer 7

You can always use the method seen right here on Stack Exchange. Not only does it let you know if the current comment is too long or too short, it also gives you an exact character count as you type.

If you hit "Add Comment" with an invalid character count, it flashes the text counter at you to draw your attention to it. Additionally, the color gets progressively more "aggressive" as you get close to the character limit to warn you you're about to run out of space.

Personally, I'd probably change the color of the "nn more to go..." text, but either way it does a pretty good job.