Best practice for validating text input on mobile
I'm designing a mobile application where user can order groceries from different suppliers, each order could have a notes to the supplier. Due to different downstream systems used by different suppliers, for the order notes, some allow 256 characters whereas some only allow 64 characters, also all supplies have restriction of character that no emoji is allowed.
The design is one screen, there is a carousel of suppliers on top that user can switch, with order information below the carousel (e.g. quantity, notes, etc).
We know the message length restriction for each supplier, the issue comes when user has entered, say 160 characters, under the limit allowed by supplier A, then switches to supplier B who only allows 64 characters for order notes.
I'm wondering what could be the best (in term of UX) practice to handle this? The options I could think of are:
- highlight the extra characters in the message that's not allowed for supplier B, and disable the Proceed button, probably show an inline message below the notes field, saying your message is too long.
- highlight the extra characters in the message like option 1, but do not disable the Proceed button, when user taps on the button, show an alert saying "please refine your message".
- something else?
The main concern here is, user can switch between supplier with 64 and/or 256 characters limit, I want to communicate to users in a soft way other than modal alert every time they switch supplier.
Thanks for the help!