Does anyone have good suggestions for displaying ‘max length exceeded’ errors to a user when a single character doesn’t equal one byte?
I’m at a loss for words, but I found a quote that’s more eloquent:
If the buffer runs over by three bytes, what do you tell the user? Three bytes could be one, two, or three characters that the user needs to trim. Depending on which characters they trim, the result might still be too long. And recall that the user’s perception of ‘a character’ is probably closer to a grapheme or grapheme cluster than to a character. So they might delete too many characters without realizing it. Finally, if the buffer limit is small (like 10 or 20), some languages like Chinese will be severely restricted on the number of characters permitted.
A couple of constraints I’m under is that its a form-driven website and the underlying database columns sizes can’t change (the quote-page suggests having a 40byte buffer and enforcing a 10character limit).
My favorite way to solve this problem is to highlight the portion of the input that exceeds the maximum length. This provides a visual cue as to which part makes it ‘too long’, without having to get into the specifics of how many bytes or characters it was.
If you can use Javascript (for example, if you don’t need to meet 508 standards), I also like monitoring the length of the field and alerting the user when it’s too long (while still doing server-side validation, of course).
If you don’t want to get into complex CSS inside the input field, you can just reproduce the bad input below the field and highlight it there.