1

When I was working on validation just now, I came up with a couple of questions with regard to validation. When should an input border's color change?

  • When should it turn from (a default or) no color to e.g. a green-colored border?
  • when should it turn from (a default or) no color to e.g. a red-colored border?
  • When should it turn from e.g. a red-colored border to e.g. a green-colored border?

Most of the time I see that either the input's border color changes on the submition of the form or when the input's value changes (see below as an example).

Example

Isn't changing the color on the submition too late?

Isn't changing the color on input's value change too broad? (What about if I fill in a number inside a text input field, the border will change from red to green whilst the value inside related input is actually, in fact, invalid?)

Is there any best practice or are there any guidelines for the handling of input validation when it comes to user experience?

1

Isn't changing the color on the submission too late?

Not necessarily. It depends on the technical possibilities to improve UX.

For the best UX, the color (and checkmark/x indicators) should change as soon as technically possible and only when it is definitive and informative for the user.

Let's explain "as soon as technically possible":

If validation can be done immediately after the value of the input has changed using javascript, the valid/invalid indication can also be immediate. When validation is done server-side, that will be as immediate as the server and connection allows. Also if server-side validation can be slow, think about implementing a wait/progress indicator (spinner) or show the validation result after submit.

To explain "only when it is definitive and informative":

The value should be validated only after the user is done typing. If the value of the input is formatted right but conflicts with another input, this should be calculated immediately (also client or server-side) or otherwise don't change the indicators.

When should it turn from (a default or) no color to e.g. a green-colored border?
when should it turn from (a default or) no color to e.g. a red-colored border?

Don't change to any color when the user is still typing. It doesn't make sense to validate unfinished input and showing an error while the user isn't finished doesn't give a nice impression. A common pattern is that the validation is done when the field loses focus, but a nice to have is to do the validation also when the user has entered enough characters and then pauses for a few seconds.

When should it turn from e.g. a red-colored border to e.g. a green-colored border?

After the color has changed, leave it as is until the user starts editing the field again.

To come back to:

Isn't changing the color on the submission too late?

If you can show some indicators only after submit, it is recommended to do that for all fields. Don't mix them up with immediate (dynamic) indicators, as that will be confusing or give the idea that something is broken.

The main advice here is to think from the user's perspective first and use the technical possibilities to improve the experience.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.