Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
2 of 6 tasks
benelan opened this issue Apr 30, 2024 · 2 comments
Closed
2 of 6 tasks

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

benelan opened this issue Apr 30, 2024 · 2 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone
Milestone
2024-04-30 - Apr ...

Comments

@benelan
Copy link
Member

benelan commented Apr 30, 2024

Check existing issues

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

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)
@benelan benelan added enhancement Issues tied to a new feature or request. 2 - in development Issues that are actively being worked on. estimate - 5 A few days of work, definitely requires updates to tests. labels Apr 30, 2024
@benelan benelan self-assigned this Apr 30, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone Calcite (dev) Issues logged by Calcite developers. labels Apr 30, 2024
@benelan benelan mentioned this issue Apr 30, 2024
Merged
benelan added a commit that referenced this issue Apr 30, 2024
@benelan
feat: add validity property to form components (#9210)
e49902b 
**Related issue:** #9229

## Summary

Add the readonly `validity` property to form components, which exposes
the [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
This allows users to set custom validation messages based on the invalid
constraint. See the new validation demo for a usage example.
@benelan benelan mentioned this issue Apr 30, 2024
Merged
@benelan benelan added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Apr 30, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 30, 2024 •
edited by benelan

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 geospatialem mentioned this issue Apr 30, 2024
Open
@geospatialem geospatialem added this to the 2024-04-30 - Apr Release milestone Apr 30, 2024
@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Apr 30, 2024
@geospatialem
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone
Projects
None yet
Milestone
2024-04-30 - Apr Release
Development

No branches or pull requests
3 participants
@geospatialem @benelan @DitwanP