Add ability to check a form component's validity for setting custom messages

benelan commented 6 months ago

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Description

Add a way to check the ValidityState of a component so custom validation messages can be set based on different constraints. The implmentation will be switched to use elementInternals once it has full support (#8126).

Acceptance Criteria

The following items are required:

A calciteInvalid event, which fires when the form is submitted with invalid values.
A readonly validity property on form components, which exposes the ValidityState. This will allow users to conditionally set custom validation messages based on the issue.

Relevant Info

No response

Which Component

Form associated components

Example Use Case

https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#complex_constraints_using_the_constraint_validation_api

Priority impact

p2 - want for current milestone

Calcite package

[X] @esri/calcite-components
[ ] @esri/calcite-components-angular
[ ] @esri/calcite-components-react
[ ] @esri/calcite-design-tokens
[ ] @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)

github-actions[bot] commented 6 months ago

Installed and assigned for verification.

Edit: You can use this codepen for testing ~~once a next version releases (it will throw errors until then)~~.

geospatialem commented 6 months ago

Verified in 2.8.0-next.19 with Ben's codepen using the validityStates. 🎉

Esri / calcite-design-system