In Iteration 1, we will not have sophisticated validation of captions. That is described in T292888: Add an image: caption validation (PLACEHOLDER). This is a simple minimum version.
- When the user first arrives on the caption step, the publish button is not active, and no warning message is present.
- Then the user starts entering a caption. Once they get to five characters, the publish button becomes active. If they delete characters and go below five characters, then it goes inactive again.
- If they do anything that brings their focus outside the caption box, like opening image details, opening the caption onboarding, or tapping the inactive publish button, this triggers the red warning text. Exception: T295911: Add an image: always show the placeholder text when there's no input
- Once the red warning text has been triggered, it then displays whenever there are fewer than five characters in the box, until the user leaves this step.
- The text starts with a "stop sign" icon, and reads, "Captions must be 5 characters or longer."
Mockup as of 2021-10-29:
Figma: https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task?node-id=3050:9628