Input components chained validation logic

[yuriy-fix]

Description

Chaining validation in the components when web-component, flow counterpart and Binder are used together.
Validation should happen in the order 1. web-component, 2. Flow component, 3. Binder.

Problems with current validation behavior

• Currently client-side validation is disabled when Flow component is used.
• Binder is not taking into account validation constraints of flow components.
• The field cannot be validated on blur when used with flow counterpart.
• Fields are not validating client values that cannot be represented as valid server-side values (e.g. qwerty string is not sent to flow component DatePicker as it's not of type LocalDate)

Use cases

As a developer
I want my field to be validated on blur / value changed regardless of flow component, Binder usage.

As a developer
I want my field's validation constraints to be chained through web-component, flow component and Binder.

Acceptance criteria

• When used with Flow, web-components
  • should be able to set themselves invalid
  • should NOT be able to set themselves valid
• Web-components should notify their Flow counterparts when client side validation is done, and
  • it should trigger server-side validation
  • it should trigger Binder validation
• Input components should implement HasValidator and provide getDefaultValidator
• Input components should override addValidationStatusChangeListener to trigger Binder validation when web-component and Flow component validations are done.

Related Flow issue

• Binder should always validate after field's internal validation flow#8242
  • feat: enable components to notify binder when validation state changes flow#13940

General criteria

• APIs reviewed

• Performance

• UX/DX tests in Alpha

• Documentation:

• How to test?

• Limitations:

[vursen]

Some discoveries that were made along the way:

• Align triggering validation on property changes web-components#4196
• Validate on constraint property changes if the field has a value web-components#4371
• Align field components behavior initially set as invalid with no constraints web-components#4170
• setValue doesn't trigger validation for some TB field elements flow-components#3420
• sendKeys calls are not delegated to the input element for some TB field elements flow-components#3502
• [number-field] The field is not validated when trying to commit a non-parsable value web-components#4258
• minlength and maxlength are not validated when value is set programmatically web-components#4358
• [date-time-picker] Should not trigger validation when focus is moving inside the field web-components#4461
• [number-field] Pressing Enter doesn't trigger validation for bad input web-components#5113

[vursen]

The new validation behavior is now available under the feature flag in v23.2 for the following components:

• TextField
• TimePicker
• DatePicker
• DateTimePicker

To try it out, enable the feature flag in your application by adding the following to vaadin-featureflags.properties:

com.vaadin.experimental.enforceFieldValidation=true

[vursen]

Here is a summary of the changes implemented as part of this ticket:

Binder Takes Into Account Component Constraints

Every field component provides its own set of constraints such as required, minlength, pattern, and so on.

Before

When using Binder, it ignored component constraints, so they would only affect UX but not the server-side invalid state.

After

Component constraints are integrated into Binder validation. Binder checks the value against constraints before running custom validators.

The only exception is the required constraint which doesn't participate in Binder validation since Binder provides its own asRequired validator.

Limitations

• It's currently not possible to configure custom error messages for constraints, but there are plans to improve that, see flow-components#4618
• It's currently not possible to get Binder back to ignore constraints as before, other than not using constraints at all.

Blur Triggers Server-Side Validation

Before

Both constraint and binder validation were only triggered on value change while client-side validation was completely ignored.

After

The server-side validation timing is aligned with client-side validation, meaning that whenever the web component validation occurs, it triggers the corresponding validation in the Flow component.

In practice, it means that the server-side validation will be also performed on blur. This solves issues where required fields didn't become invalid after the first user interaction.

Limitations

• The component validates on blur even when the user leaves it without typing anything. This behavior results from the web component, which validates on blur to detect possible bad input (web-components#6146).
• The server-side validation can be triggered more frequently than necessary. For example, if you edit a Text Field and then blur, both value-changed and blur events will fire at the same time, resulting in double validation in a single round-trip (flow-components#4390).

Entering Bad Input Invalidates The Component

DatePicker, IntegerField, and some other similar components only accept user input that can be parsed as a LocalDate, Integer, etc. Otherwise, the value falls back to null on the server.

Before

Entering bad input didn't invalidate the component because the server treated this case as an empty value.

After

The server knows if the user has entered some input. When it cannot be parsed, it's considered bad input and will cause constraint validation to fail once the user presses Enter or removes focus from the component.

Affected Components

The above changes apply to the following components:

• DatePicker
• TimePicker
• DateTimePicker
• TextField
• NumberField
• IntegerField
• BigDecimalField
• PasswordField
• EmailField
• TextArea
• Select
• ComboBox
• MultiSelectComboBox
• RadioGroup
• CheckboxGroup