User Story:: As a user, I want to see problems with my input so I can correct them
Context of use: The user would be on the mobile banner and tries to enter interval, amount and/or payment method.
Possible Solution: The UX team suggests to use the same behavior across mobile, desktop and donation page. Thus…
- an inline validation should be used which is triggered onblur and/or when the submit button is clicked.
- The viewport should scroll to the first error from the top after the submit button is clicked
- The inline validation should show a terse text below the header of the button group where the content was (not) entered. The text from the desktop banner can be used for now.
- To make space for the error messages, the banner should grow slightly when an error is shown and the Wikipedia content should be pushed down accordingly.
- The font should be red (for the "red banner design" it would be #990000) and the font have the same height as other UI copy in the banner. Since there are several font sizes used, it should be 16px (as the font size from the buttons would be too big)