feat: add functionality for Constraint Validation API & types#2301
feat: add functionality for Constraint Validation API & types#2301
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds form validation functionality based on the Constraint Validation API, including automated error handling, inline feedback, and error summaries.
- Implements a validation system using the Constraint Validation API with support for custom error messages
- Adds visual feedback for invalid form fields with inline error messages and an error summary component
- Creates comprehensive test coverage for validation behavior across different user interactions
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| components/o3-form/stories/formValidation.test.stories.tsx | Test suite validating error display, error summary, and progressive validation behavior |
| components/o3-form/stories/formValidation.stories.tsx | Storybook story demonstrating the form validation feature |
| components/o3-form/stories/FormValidationHtml.tsx | HTML template component with test data for validation demonstrations |
| components/o3-form/src/tsx/fieldComponents/Form.tsx | Adds optional id prop to Form component |
| components/o3-form/src/js/validation.js | Core validation logic with error collection, inline feedback, and error summary rendering |
| components/o3-form/src/css/components/error-summary.css | Fixes CSS class name typo from o3-forms__error-summary__list to o3-form__error-summary__list |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
…idations-for-o-3-components
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 7 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
…g escaping or encoding Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
…idations-for-o-3-components
The issue came down to browsers rendering different text for the same errors. Short term fix for now is to assert on both error messages
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
…idations-for-o-3-components
Describe your changes
Additional context
Checklist before requesting a review
percylabel for o-[COMPONENT] orchromaticlabel for o3-[COMPONENT] on my PR before merging and after review. Find more details in CONTRIBUTING.md