db-input: HTML validation is supersedes data-variant

[annsch]

Which generators are impacted?

• [ ] All
• [ ] HTML
• [X] React
• [ ] Angular
• [ ] Vue
• [ ] Web components
• [ ] Power Apps

Reproduction case

We're using react-hook-forms and Zod for validation and schema and do not like to duplicate validations for form elements (e.g. ). Currently HTML validation is more important than our custom validation: elements with data-variant="critical" are displayed as valid when simple HTML validation returns true:

Expected Behaviour

data-variant prop should overwrite HTML validation via :user-valid

Screenshots

No response

Browser version

None

Add any other context about the problem here.

No response

[annsch]

@mfranzke this could be our preferred solution if HTML supported complex business logic. This example is only for demonstration purpose. We have to build complex validation logic which isn't done by only setting min- and maxLength ... e.g. denpndency between two ore more form fields

[mfranzke]

@mfranzke this could be our preferred solution if HTML supported complex business logic. This example is only for demonstration purpose. We have to build complex validation logic which isn't done by only setting min- and maxLength ... e.g. denpndency between two ore more form fields

Complex regarding providing a pattern? Or doing some other fancy stuff, and than only wanting to define a valid or invalid on that form field?

[annsch]

@mfranzke this could be our preferred solution if HTML supported complex business logic. This example is only for demonstration purpose. We have to build complex validation logic which isn't done by only setting min- and maxLength ... e.g. denpndency between two ore more form fields

Complex regarding providing a pattern? Or doing some other fancy stuff, and than only wanting to define a valid or invalid on that form field?

the latter ...

[mfranzke]

have you tried using the semantic invalid property for this instead of using the pure visual variant? We need to better document this one.

[annsch]

no, I haven't, is this the preferred solution?

[mfranzke]

no, I haven't, is this the preferred solution?

yes, I would suggest that one, as it includes both the visual as well as the semantic annotation (aria-invalid="true"-attribute).

[mfranzke]

And we need to further update our documentation and make these things much clearer (with our naming of those aspects as well).

[nmerget]

@annsch we will remove the data-variants from form-components for beta.

Furthermore, we will provide only the invalid and valid forms which can be triggered by browser defaults like required|minlength etc., or by forcing the validation with the invalid prop.