tinypilot icon indicating copy to clipboard operation
tinypilot copied to clipboard

Make UI consistent regarding when to clear input validation errors

Open jotaen4tinypilot opened this issue 2 years ago • 1 comments

We currently don’t follow a consistent pattern in regards to clearing validation errors:

  • In the <security-dialog>, if you enter too short a password and try to submit the form, the validation error is hidden once you start changing one of the input fields (i.e., once you start typing).
  • In the <change-hostname-dialog>, if you enter a malformed hostname such as *&!^@^#*(, the validation error stays until you re-submit with another input value.

Good points can be made for either way:

  • By clearing the validation error after the user starts doing something, we acknowledge that the problem now might have gone away, and the user might feel more encouraged to re-try their submission.
  • By leaving the validation until re-submission, the user is able to study the error text, in order to ensure that they address the issue properly. That’s especially helpful if the error message contains more comprehensive information, such as the allowed characters for a valid hostname.

A potential third (middleground) option could be to add some sort of “dismiss” functionality (e.g., an × button in the upper right corner of the inline message box). That way, the error box would persist by default, but the user could explicitly make it go away.

What we should do is this:

  • Come up with and decide on an explicit rule how we go about clearing validation errors. This should be documented in the style guide.
  • Roll out the new rule to all places where input validation errors are shown.

jotaen4tinypilot avatar Oct 12 '23 16:10 jotaen4tinypilot

I like clearing the validation error quickly.

I hate having apps yell at me about stuff, so the less we admonish users (or at least the less we keep the admonishment up), the better.

mtlynch avatar Oct 12 '23 20:10 mtlynch