Add form field validation to BaseForm/ActionForm#2963
Open
Conversation
added 2 commits
April 8, 2026 12:14
Wire react-hook-form validation using onTouched mode with rule extraction from field constraint props (min/max, minLength/maxLength, maxSize, required).
Contributor
size-limit report 📦
|
6 tasks
added 3 commits
April 8, 2026 15:29
- Don't block submit on validation errors (use trigger() + always submit) - Switch from data-invalid to aria-invalid for accessibility - Move rules computation back to FieldBridge - Make FormFieldRenderer onBlur/error required, extract common props - Rename fieldState error to fieldError in FieldBridge - Enforce maxSize in FilePickerField by filtering oversized files - Extract ActionButton into reusable variable in SubmitButton - Add tests for required/non-required submission scenarios - Rename changeset
nfdiop
commented
Apr 9, 2026
| formTitle?: string; | ||
| fieldDefinitions: ReadonlyArray<RendererFieldDefinition>; | ||
| onSubmit: (formState: Record<string, unknown>) => void; | ||
| onSubmit: (formState: Record<string, unknown>) => Promise<void> | void; |
nfdiop
commented
Apr 9, 2026
| * overflow: visible to allow the path to be rendered outside the | ||
| * clipping boundary of the SVG container. | ||
| */ | ||
| & svg { |
Contributor
Author
There was a problem hiding this comment.
Curious if there is a better way to fix
- Add useAsyncAction hook tests (7 tests) - Improve extractValidationRules tests: exact assertions for dates/file size, getValidateFns helper to reduce casting boilerplate - Remove FieldCommonProps, pass error directly as named prop - Consolidate onBlur logic in FieldBridge (the only RHF-aware module): container-aware blur filtering + touch-on-change for select-like fields - Revert FilePickerField handleInputChange to original form
nfdiop
commented
Apr 10, 2026
| const submissionErrorMessage = submissionError != null | ||
| ? submissionError instanceof Error | ||
| ? submissionError.message | ||
| // TODO: provide better error message |
nfdiop
commented
Apr 10, 2026
| * Return `undefined` if valid, or an error message string if invalid. | ||
| */ | ||
| validate?: (value: FieldValueType<Q, K>) => Promise<boolean>; | ||
| validate?: (value: FieldValueType<Q, K>) => Promise<string | undefined>; |
Contributor
Author
There was a problem hiding this comment.
I prefer when users return a string we can use to provide an explanation. Fine to change since the API is not released yet
nfdiop
commented
Apr 10, 2026
| * A discriminated union describing which validation rule failed and the | ||
| * constraint data the user needs to build a meaningful error message. | ||
| */ | ||
| export type ValidationError = |
Contributor
Author
There was a problem hiding this comment.
Changed so the error message can use the validation config
nfdiop
commented
Apr 10, 2026
| * Returns a ref whose `.current` is `true` while the component is mounted | ||
| * and `false` after unmount. Use to guard async state updates. | ||
| */ | ||
| export function useIsMounted(): Readonly<React.RefObject<boolean>> { |
Contributor
Author
There was a problem hiding this comment.
Simple hook so no tests added
nfdiop
force-pushed
the
nfdiop/add-form-validation
branch
from
4f57a1c to
7f402ae
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
onTouchedmode (validate on blur, revalidate on change after first error)extractValidationRulesutility that derives RHF rules from field constraint props (min/max,minLength/maxLength,maxSize,required)data-invalidattribute and CSS tokensValidationErrordiscriminated union so users can customize messages viaonValidationErrorTest plan
extractValidationRules(19 tests covering all field types, custom validate, onValidationError overrides)BaseForm.test.tsx(required error on blur, minLength error, error clears on fix, prevents submit when invalid)pnpm turbo typecheck --filter=@osdk/react-components)Notes