Improve DateTimePicker's validation for better user experience

[vursen]

Description

DateTimePicker has a number of validation issues and inconsistencies that negatively impact user experience:

1. Blur triggers the required error when leaving the field without changes (related to the validated event)
2. Validation can be triggered more than once in a round-trip (related to the validated event)
3. Entering unparsable input in the DP or TP and pressing Enter or navigating to the other picker doesn't trigger the bad input error, although it's already known the value will be invalid
4. Outside click that closes the DP or TP overlay doesn't trigger the bad input error as well, creating the impression of validity. The error appears only on the second click that corresponds to blur.
5. Selecting a date in the DP beyond min/max doesn't trigger the min/max error, although it's already known the value will be invalid
6. Removing part of a valid complete value and then navigating to the other picker results in the immediate required error, although the user is still interacting with the field
7. Leaving the field with an incomplete value (containing only a date or time) doesn't invalidate the field unless it's required
8. Lack of a dedicated i18n error message for incomplete values

These issues are partly related to the validated event, which DateTimePicker still uses for triggering validation, unlike other components that have been refactored to use the unparsable-change event.

Related

• [DateTimePicker] Binder does not receive partial values (containing only date or time) #5316
• Validation refactor to fix issues related to the validated event #5537 (comment)
• Improve JavaDoc to explain field constraint validation #6545 (comment)

[vursen]

After these issues are resolved, the JavaDoc of the DateTimePicker class can be updated to include a section about validation.

[vursen]

Here is a prototype that aims at addressing all these issues simultaneously:

• https://github.com/vaadin/web-components/compare/proto/date-time-picker/unparsable-incomplete-change
• https://github.com/vaadin/flow-components/compare/proto/date-time-picker/unparsable-incomplete-change

A brief overview:

• Introduces the new unparsable-change event
• Replaces the validated event with unparsable-change in the Flow counterpart
• Prevents multiple validation during a single round-trip
• Improves validation consistency across such user actions as Enter, Tab, overlay close, outside click, blur
• Postpones validation during navigation between DP and TP unless we are certain the value will be invalid
• Introduces a dedicated error message for incomplete values
• Validates the date against min/max limits as soon as possible