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

chore: supplement validation behavior #3106

Merged
merged 10 commits into from
May 31, 2024
Merged

chore: supplement validation behavior #3106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1891c2a
chore(input): set validationBehavior to native
wingkwong May 28, 2024
d890270
chore(docs): revise validate content in input
wingkwong May 28, 2024
60e9fcc
chore(input): set validationBehavior to native
wingkwong May 28, 2024
7c253f8
chore(docs): add Validation Behavior to breaking change
wingkwong May 28, 2024
6bd9af8
chore(docs): revise content in cli
wingkwong May 28, 2024
2447a15
chore(docs): fix typo
wingkwong May 28, 2024
c00316e
chore(docs): update validate in other components
wingkwong May 28, 2024
ec9600b
chore(docs): update validate content
wingkwong May 28, 2024
597213a
chore(input): undo validationBehavior
wingkwong May 30, 2024
1e84b98
refactor(docs): revise validate content
wingkwong May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions apps/docs/content/blog/v2.4.0.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ The disabled option(s) will be displayed in the bottom of the list.

### Doctor Command add peerDependencies check

The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies, relation: [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954).
The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies. (See [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954) for more).

<Spacer y={4} />

Expand Down Expand Up @@ -266,8 +266,20 @@ you need to update the import as follows:
+ import {cn} from "@nextui-org/theme"
```

<Spacer y={4} />
### Validation Behavior

Since v2.4.0, we've changed the default validation behavior to `aria` which means no native validation is applied. If you wish to use the native validation, you can set `validationBehavior` to `native` to the input components or set it to the Provider as stated above.

For those who use `validationBehavior="aria"`, `validate` will be no longer applied since it is only for native validation. Therefore, you need to switch to use `isInvalid` prop instead.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The form does not prevent submission, but the validate function will display error messages.


```tsx
<form onSubmit={onSubmit}>
<Input errorMessage={formErrors?.field1} isInvalid={!!formErrors?.field1} name="field1" />
<Button type="submit">Submit</Button>
</form>
Comment on lines +276 to +279
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

```

<Spacer y={4} />

## Other Changes

Expand Down Expand Up @@ -307,6 +319,7 @@ you need to update the import as follows:
- Refactored the useScrollPosition hook to improve performance and stability by using useCallback for the handler function and useRef for throttleTimeout. [PR](https://github.com/nextui-org/nextui/pull/3049) - [@Gaic4o](https://github.com/Gaic4o)

**Documentation**:

- Updated documentation to reflect the new features and changes in the components, API references, and CLI.

Special thanks to NextUI Team members [@kuri-sun](https://github.com/kuri-sun), [@ryo-manba](https://github.com/ryo-manba),
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/checkbox-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
| validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - |
| description | `ReactNode` | The checkbox group description. | - |
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | The checkbox group error message. | - |
| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
| isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/date-input.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ import {parseZonedDateTime} from "@internationalized/date";
| locale | `string` | The locale to display and edit the value according to. | - |
| description | `ReactNode` | A description for the date input. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - |
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
| startContent | `ReactNode` | Element to be rendered in the left side of the date input. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the date input. | - |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/date-picker.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ import {I18nProvider} from "@react-aria/i18n";
| placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-picker. | - |
| description | `ReactNode` | A description for the date-picker. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - |
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
| startContent | `ReactNode` | Element to be rendered in the left side of the date-picker. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the date-picker. | - |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/date-range-picker.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,7 +354,7 @@ import {I18nProvider} from "@react-aria/i18n";
| placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-range-picker. | - |
| description | `ReactNode` | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
| validate | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - |
| validate | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. | `aria` |
| startContent | `ReactNode` | Element to be rendered in the left side of the date-range-picker. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the date-range-picker. | - |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/input.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ In case you need to customize the input even further, you can use the `useInput`
| placeholder | `string` | The placeholder of the input. | - |
| description | `ReactNode` | A description for the input. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. It is only shown when `isInvalid` is set to `true` | - |
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
| startContent | `ReactNode` | Element to be rendered in the left side of the input. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the input. | - |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/radio-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ In case you need to customize the radio group even further, you can use the `use
| defaultValue | `string[]` | The default selected value. (uncontrolled). | - |
| description | `ReactNode` | Radio group description . | - |
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | Radio group error message. | - |
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
| isDisabled | `boolean` | Whether the radio group is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
Expand Down
Loading