[Feature Request]: Enhancing Validation for Form Components

[nnaydenow]

Feature Request Description

Native HTML form elements provide detailed information about the validity of specific fields. This depends on how they are configured using attributes like required, min, max, maxlength, and others.

MDN: HTMLObjectElement Validity MDN: ValidityState API This built-in validity helps improve how form elements function, how they are styled (e.g., using :invalid or :valid selectors), and how they provide feedback about why a component may be invalid.

Proposed Solution

By integrating the ElementsInternal API into ui5-webcomponents, the form web components can define their validity based on their specific properties and attributes.

Currently, only the required property is reflected in the validity object of the custom element.

Proposed Alternatives

No response

Organization

No response

Additional Context

No response

Priority

Low

Privacy Policy

• [x] I’m not disclosing any internal or sensitive information.

[nnaydenow]

Topic P

• [x] ui5-checkbox - https://github.com/SAP/ui5-webcomponents/pull/11823
• [x] ui5-select - https://github.com/SAP/ui5-webcomponents/pull/11823

Topic BAL

• [x] ui5-color-picker => nothing to be done for form validity, but proposal for interaction change: isn't better to bring the previous value in the input instead of setting value state error as the previous value (color) is still set in the picker
• [ ] ui5-date-picker: valueMissing, patternMismatch, rangeUnderflow, rangeOverflow
• [ ] ui5-daterange-picker valueMissing, patternMismatch, rangeUnderflow, rangeOverflow
• [ ] ui5-datetime-picker valueMissing, patternMismatch, rangeUnderflow, rangeOverflow
• [ ] ui5-file-uploader valueMissing, rangeOverflow
• [ ] ui5-step-input valueMissing, patternMismatch (valiePrecision prop), rangeUnderflow, rangeOverflow
• [ ] ui5-switch
• [ ] ui5-time-picker valueMissing, patternMismatch

Topic RL

• [ ] ui5-combobox
• [ ] ui5-input
• [ ] ui5-multi-combobox
• [ ] ui5-multi-input
• [ ] ui5-range-slider
• [ ] ui5-slider
• [ ] ui5-textarea

Topic RD

• [ ] ui5-radio-button

[dobrinyonkov]

Internal Reference: BGSOFUIPIRIN-6794

[hristop]

Internal Reference: BGSOFUIRILA-4171