web-components
web-components copied to clipboard
Align triggering validation on property changes
Motivation
Validation is not triggered consistently on constraint and value property changes across field components. To illustrate the issue, look at how different components handle validation on change of different properties:
TimePicker
Property | Validation on change |
---|---|
value | no |
min | no |
max | no |
pattern | only if already invalid and pattern is defined |
required | no |
DatePicker
Property | Validation on change |
---|---|
value | only if value is provided |
min | only if value is provided |
max | only if value is provided |
pattern | only if already invalid and pattern is defined |
required | no |
Select
Property | Validation on change |
---|---|
value | always |
required | no |
NumberField
Property | Validation on change |
---|---|
value | only if already invalid |
step | only if already invalid and step is defined |
min | only if already invalid and min is defined |
max | only if already invalid and max is defined |
required | only if already invalid and required is defined (= true) |
So, as you can see, things are quite inconsistent at the moment. One of the reasons is that not all the components are currently using InputConstraintsMixin
.
Proposal
- Validate on value property change when at least one constraint is defined.
- Validate on constraint property change when a non-empty value is provided (extracted to #4371).
Also, prefer using InputConstraintsMixin
wherever possible.
Components
- [ ] TextField
- [ ] EmailField
- [ ] PasswordField
- [ ] Select
- [ ] ComboBox / MultiSelectComboBox
- [ ] DatePicker
- [ ] TimePicker
- [ ] DateTimePicker
- [ ] IntegerField
- [ ] NumberField
- [ ] CheckboxGroup
- [ ] RadioGroup
- [ ] TextArea
Related to https://github.com/vaadin/web-components/issues/4170 in terms of both affecting the validation logic in InputConstraintsMixin
.
A similar issue for Flow components: https://github.com/vaadin/flow-components/issues/2370