Instant validation feedback

[vursen]

Motivation

Case 1: Valid => Invalid

The user starts typing something that doesn't match constraints.

In some use cases, it is preferable to inform the user about errors as early as possible. An example would be PasswordField with complex password strength constraints. It is better to notify the user that his password isn't secure enough before he moves focus to another field.

This behavior can be partially achieved for text fields by using ValueChangeMode.EAGER. The caveat is that it doesn't work when the user is entering bad input e.g. into a NumberField. In that case, there is no actual server-side value change and no client-side validation until blur.

For other fields such as DatePicker, TimePicker, etc, there is no option for eager validation at the moment.

Case 2: Invalid => Valid

The user intends to correct an invalid value that he has earlier entered into a field.

In this case, delaying validation until blur by default can even be confusing. The user may have already fixed the error but the field still remains invalid because it continues to be focused. This can make the user wonder: "Did I miss something again?", "Did I make a mistake again?".

Currently, only text fields revalidate eagerly by default while the user corrects an error. Other fields don't, though this reasoning applies to all the fields.

Ideas for solutions

Solution 1: A ValidationMode API

Introduce an API for controlling the validation timing. It could be some sort of ValidationMode, similar to ValueChangeMode:

enum ValidationMode {
  EAGER,
  EAGER_WHEN_INVALID,
  DEFAULT
}

This API is assumed to be provided by all the fields that accept user input, not only by text fields.

One caveat here is that we cannot consider ValidationMode separately from ValueChangeMode for text fields. Otherwise, there might be conflicts. For example, to work properly, ValidationMode.EAGER would always require ValueChangeMode.EAGER.

Solution 2: Remove the invalid state on input

This solution only addresses "Case 2: invalid => valid".

Remove the client-side invalid state on the first key press.

This solution is assumed to work for all the fields that accept user input, not only for text fields.

The field will invalidate on blur again if the corrected value still doesn't meet all requirements.

Solution 3: Remove the invalid state on focus

This solution only addresses "Case 2: invalid => valid".

Remove the client-side invalid state on focus.

Warning
This solution has an accessibility downside. The AT user won't likely get a chance to hear the error message because it will disappear as a result of removing the invalid state.

Additional context

Related to vaadin/platform#3066

[jouni]

Related: vaadin/web-components#1515