Support native form validation by devongovett · Pull Request #5288 · adobe/react-spectrum

devongovett · 2023-10-22T20:37:59Z

Supersedes #4640

This implements support for native HTML form validation across all of our form components. It adds the following APIs:

The validationBehavior prop can be set to "aria" (the default) or "native". When set to "native", we use the native required attribute rather than aria-required so that form submission is blocked by the browser. In addition, we track other native validation messages such as pattern or type="email" and display all validation errors as Spectrum help text rather than the browser's builtin UI.
The validate prop can be set to a function to perform custom validation. This receives the current value of the field and can return an error message (or multiple) if it is invalid. This is displayed immediately (in realtime) if validationBehavior="aria", or after the field value is committed (e.g. blurred) when validationBehavior="native". This is in addition to our existing isInvalid and errorMessage props which are always displayed in realtime.
The errorMessage prop now accepts a function in addition to a string. The function receives the current validation details for the field and returns the validation error to display. This allows customizing native validation messages provided by the browser.
The Form component accepts a validationErrors prop, which can be set to an object mapping field name attributes to error messages. This is useful to display validation errors that come from the server. The fields receive these messages from the form via context. After the user modifies the value in the field, the server validation errors for that field are cleared until the validationErrors prop changes (i.e. after the next submit).

Implementation

Currently this is implemented in the hooks and in React Spectrum. It will come to React Aria Components in a followup PR. The implementation consists of two parts:

useFormValidationState in @react-stately/form, and used by all of our stately hooks. This tracks both the realtime validation state and validation state currently displayed to the user, and combines all of the errors from all of the above sources together. It includes methods to update and commit the validation state when the user changes the value.
useFormValidation in @react-aria/form, used by all of our aria hooks. This synchronizes the validation state with the native input element, and triggers state updates when various browser events occur.

Test instructions

See the "Native validation" and "Server validation" stories that have been added under "Form" for the new behavior, and smoke test other form/component stories.

# Conflicts: # packages/@react-aria/checkbox/package.json # packages/@react-aria/datepicker/package.json # packages/@react-aria/numberfield/package.json # packages/@react-aria/radio/package.json # packages/@react-aria/textfield/package.json # packages/@react-spectrum/color/package.json # packages/@react-spectrum/datepicker/package.json # packages/@react-spectrum/form/package.json # packages/@react-spectrum/numberfield/package.json # packages/@react-spectrum/searchfield/package.json # packages/@react-spectrum/textfield/package.json # packages/@react-stately/datepicker/src/useDateFieldState.ts

# Conflicts: # packages/@react-spectrum/form/src/Form.tsx # packages/@react-spectrum/searchfield/src/SearchField.tsx

Is this a breaking change??

rspbot · 2023-10-25T04:48:34Z

Build successful! 🎉

LFDanLu

One thing I noticed when testing the stories, currently looking at the other code changes

LFDanLu · 2023-10-25T20:21:40Z

+}
+
+ServerValidation.story = {
+  parameters: {description: {data: 'This story is to test that server errors appear after submission, and are cleared when a field is modified.'}}


Noticed that the "Favorite Pet" radiogroup validation error after submission doesn't clear when the user modifies the selected radio option via keyboard arrows. It only gets cleared if the user clicks on a different radio option

To reproduce:

go to https://reactspectrum.blob.core.windows.net/reactspectrum/36a3c4cbf1421edd7cb21466d4fdad61077d1ca4/storybook/index.html?path=/story/form--server-validation&providerSwitcher-express=false and hit submit

Tab navigate to the "Favorite Pet" radio group and change the selected radio via the keyboard arrows. Note the error doesn't clear

snowystinger · 2023-10-26T00:04:10Z

    // (FocusScope attempts to restore focus to the tray input when tapping outside the tray due to "contain")
    // Have to do this manually since React doesn't call onBlur when a component is unmounted: https://github.com/facebook/react/issues/12363
-    return () => {
+    if (!state.isOpen && state.isFocused) {


comment above this line needs correcting, we do this before unmount now

hmm I already changed it to say "When the tray closes" instead of "unmounts". Do you mean the line about "React doesn't call onBlur when a component is unmounted"? I think that part is still true?

snowystinger · 2023-10-26T00:09:02Z

  }, [fn]);
-  return useCallback((...args) => {
-    const f = ref.current;
+  // @ts-ignore


i couldn't solve this one either :(

snowystinger · 2023-10-26T00:16:55Z

-    onChange = () => {}
+    validationBehavior = 'aria'
  }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;
+  let [value, setValue] = useControlledState<string>(props.value, props.defaultValue || '', props.onChange);


this is a bit odd, i haven't seen useControlledState in an aria package before. I assume this is because textfield doesn't have a corresponding stately hook? should it? I guess that would be breaking...

rspbot · 2023-10-26T23:01:30Z

Build successful! 🎉

rspbot · 2023-10-27T01:19:49Z

Build successful! 🎉

rspbot · 2023-10-27T01:32:33Z

Build successful! 🎉

rspbot · 2023-10-27T01:32:34Z

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

@react-aria/checkbox

CheckboxAria

 CheckboxAria {
   inputProps: InputHTMLAttributes<HTMLInputElement>
   isDisabled: boolean
-  isInvalid: boolean
   isPressed: boolean
   isReadOnly: boolean
   isSelected: boolean
 }

it changed:

useCheckbox

@react-aria/interactions

InteractOutsideProps

 InteractOutsideProps {
   isDisabled?: boolean
-  onInteractOutside?: (SyntheticEvent) => void
-  onInteractOutsideStart?: (SyntheticEvent) => void
+  onInteractOutside?: (PointerEvent) => void
+  onInteractOutsideStart?: (PointerEvent) => void
   ref: RefObject<Element>
 }

it changed:

useInteractOutside

@react-aria/tag

AriaTagGroupProps

 AriaTagGroupProps<T> {
+  errorMessage?: ReactNode
   onRemove?: (Set<Key>) => void
   selectionBehavior?: SelectionBehavior
 }

@react-aria/utils

isVirtualPointerEvent

-useEffectEvent {
-  fn: any
-  returnVal: undefined
-}
+

useFormReset

-
+useEffectEvent<T extends Function> {
+  fn: T
+  returnVal: undefined
+}

@react-spectrum/form

Form

 SpectrumFormProps {
   action?: string
   children: ReactElement<SpectrumLabelableProps> | Array<ReactElement<SpectrumLabelableProps>>
   encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
   isDisabled?: boolean
   isEmphasized?: boolean
   isQuiet?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   method?: 'get' | 'post'
   onSubmit?: FormEventHandler
   target?: '_blank' | '_self' | '_parent' | '_top'
+  validationBehavior?: 'aria' | 'native' = 'aria'
+  validationErrors?: ValidationErrors
   validationState?: ValidationState = 'valid'
 }

@react-spectrum/label

Field

 HelpText {
   descriptionProps?: HTMLAttributes<HTMLElement>
+  errorMessage?: ReactNode
   errorMessageProps?: HTMLAttributes<HTMLElement>
 }

@react-stately/checkbox

CheckboxGroupState

 CheckboxGroupState {
   addValue: (string) => void
   isDisabled: boolean
   isInvalid: boolean
   isReadOnly: boolean
+  isRequired: boolean
   isSelected: (string) => boolean
   removeValue: (string) => void
+  setInvalid: (string, ValidationResult) => void
   setValue: (Array<string>) => void
   toggleValue: (string) => void
   value: readonly Array<string>
 }

it changed:

useCheckboxGroupState

@react-stately/radio

RadioGroupState

 RadioGroupState {
   isDisabled: boolean
   isInvalid: boolean
   isReadOnly: boolean
   isRequired: boolean
   lastFocusedValue: string | null
-  selectedValue: string | null | undefined
+  selectedValue: string | null
   setLastFocusedValue: (string) => void
   setSelectedValue: (string) => void
 }

it changed:

useRadioGroupState

@react-aria/form

useFormValidation

-
+useFormValidation<T> {
+  props: Validation<T>
+  state: FormValidationState
+  ref: RefObject<ValidatableElement>
+  returnVal: undefined
+}

@react-stately/form

FormValidationContext

-
+useFormValidationState<T> {
+  props: FormValidationProps<T>
+  returnVal: undefined
+}

useFormValidationState

-
+DEFAULT_VALIDATION_RESULT {
+  isInvalid: any
+  validationDetails: VALID_VALIDITY_STATE
+  validationErrors: any
+}

DEFAULT_VALIDATION_RESULT

changed by:

VALID_VALIDITY_STATE

-
+VALID_VALIDITY_STATE {
+  badInput: any
+  customError: any
+  patternMismatch: any
+  rangeOverflow: any
+  rangeUnderflow: any
+  stepMismatch: any
+  tooLong: any
+  tooShort: any
+  typeMismatch: any
+  valid: any
+  valueMissing: any
+}

VALID_VALIDITY_STATE

-
+mergeValidation {
+  results: Array<ValidationResult>
+  returnVal: undefined
+}

it changed:

DEFAULT_VALIDATION_RESULT

privateValidationStateProp

-
+FormValidationState {
+  commitValidation: () => void
+  displayValidation: ValidationResult
+  realtimeValidation: ValidationResult
+  resetValidation: () => void
+  updateValidation: (ValidationResult) => void
+}

JaceHensley · 2023-11-22T17:49:57Z

    tabIndex = undefined;
  }

+  let {name, descriptionId, errorMessageId, validationBehavior} = radioGroupData.get(state)!;


This seems to break when the useRadio and useRadioGroup hook are used in separate components.

<RadioGroup> <RadioGroupItem /> </RadioGroup>

I think this is because in this setup the item is rendered first and then the parent is rendered. This worked before because the undefined values weren't being destructured.

This is actually a common misconception. Parents are rendered first, but children's effects run first. See https://stackoverflow.com/questions/53781632/whats-useeffect-execution-order-and-its-internal-clean-up-logic-when-requestani for some examples.

Can you reproduce this in a codesandbox? Because we have an example in our docs where the hooks are in two different components and it looks like what you've outlined, but it's working for us https://react-spectrum.adobe.com/react-aria/useRadioGroup.html#example

Are you sure you've passed the correct state object from radio group to each radio?

hey, thanks for the quick response!

You are right, I wasn't passing the correct state object. In addition to the state from useRadioGroupState I was passing extra fields through the context and then destructuring them when accessing the context. So this wasn't working for me prior either, it just wasn't throwing an error haha. After updating to use the same state object throughout it's working 👍

Here's a codesandbox showing the error I was seeing.

Thanks again for the quick response!!

romulof · 2024-01-23T14:45:11Z

+export type ValidationErrors = Record<string, ValidationError>;
+export type ValidationFunction<T> = (value: T) => ValidationError | true | null | undefined;
+
+export interface Validation<T> {


This was a breaking change for my application.

devongovett added 30 commits October 13, 2023 20:53

checkbox

ce4913e

radio

9198faa

Text fields

8ca7b64

NumberField

bf114e3

Deprecated validation in SliderThumb because it makes no sense

2606859

ColorField

ec0285a

Refactor into stately and aria hooks

9c7bff6

DateField

1b01e5a

DatePicker/DateRangePicker

b9e2c22

Remove onValidationChange from public API

1a04901

Localize date picker validation errors

3bb4eed

TimeField

44201db

refactor

cd7a76a

ComboBox

aa1492b

Picker

0bac222

fixes

3a4e9c9

Merge branch 'main' of github.com:adobe/react-spectrum into validation

d647303

# Conflicts: # packages/@react-spectrum/form/src/Form.tsx # packages/@react-spectrum/searchfield/src/SearchField.tsx

Merge errors from startName and endName in DateRangePicker

6910c7e

cleanup

1409292

Commit validation after the next render

cd96faf

SearchAutocomplete

a602c7d

Fix typescript

2174ea2

Improve stories for testing

31b68ab

fix test

63596ce

Fixup package.json

bcd97a8

Rename errors to validationErrors

0ddb0c9

fix test-17

8a2ce22

Fix docs ts for now

7b2f09b

Is this a breaking change??

Fix SSR

2f4d6e8

devongovett added 2 commits October 24, 2023 21:04

only commit on blur if the value changed

c8c09ec

ts

36a3c4c

LFDanLu reviewed Oct 25, 2023

View reviewed changes

snowystinger reviewed Oct 26, 2023

View reviewed changes

devongovett added 2 commits October 26, 2023 15:40

Merge branch 'main' of github.com:adobe/react-spectrum into validation

060ee6c

Commit radiogroup validation on keyboard interactions

9d1fbac

devongovett mentioned this pull request Oct 27, 2023

Add validation support for React Aria Components #5313

Merged

Merge branch 'main' into validation

92707e5

LFDanLu previously approved these changes Oct 27, 2023

View reviewed changes

snowystinger previously approved these changes Oct 27, 2023

View reviewed changes

TS Strict fixes

93a422d

snowystinger dismissed stale reviews from LFDanLu and themself via 93a422d October 27, 2023 00:53

fix pointer event util to always have pointertype

2fc531f

allow empty string

f3ffbd9

snowystinger approved these changes Oct 27, 2023

View reviewed changes

LFDanLu approved these changes Oct 27, 2023

View reviewed changes

devongovett merged commit 068ecd1 into main Oct 27, 2023

devongovett deleted the validation branch October 27, 2023 01:39

reidbarber mentioned this pull request Oct 31, 2023

RadioGroup onBlur event prop #5332

Closed

devongovett mentioned this pull request Nov 1, 2023

Add docs for form validation #5343

Merged

JaceHensley reviewed Nov 22, 2023

View reviewed changes

romulof reviewed Jan 23, 2024

View reviewed changes

yihuiliao mentioned this pull request Feb 8, 2024

Documentation of "useTextField" from React-Aria is not up to date #5838

Closed

ryo-manba mentioned this pull request Apr 6, 2024

Upgrade to new react aria version heroui-inc/heroui#2561

Merged

Conversation

devongovett commented Oct 22, 2023

Implementation

Test instructions

Uh oh!

rspbot commented Oct 25, 2023

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rspbot commented Oct 26, 2023

Uh oh!

rspbot commented Oct 27, 2023

Uh oh!

rspbot commented Oct 27, 2023

Uh oh!

rspbot commented Oct 27, 2023

@react-aria/checkbox

CheckboxAria

@react-aria/interactions

InteractOutsideProps

@react-aria/tag

AriaTagGroupProps

@react-aria/utils

isVirtualPointerEvent

useFormReset

@react-spectrum/form

Form

@react-spectrum/label

Field

@react-stately/checkbox

CheckboxGroupState

@react-stately/radio

RadioGroupState

@react-aria/form

useFormValidation

@react-stately/form

FormValidationContext

useFormValidationState

DEFAULT_VALIDATION_RESULT

VALID_VALIDITY_STATE

privateValidationStateProp

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snowystinger Nov 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

snowystinger Nov 22, 2023 •

edited

Loading