diff --git a/.changeset/flat-ducks-attack.md b/.changeset/flat-ducks-attack.md new file mode 100644 index 0000000000..9e643018e9 --- /dev/null +++ b/.changeset/flat-ducks-attack.md @@ -0,0 +1,5 @@ +--- +"@heroui/form": patch +--- + +changed form default validation behavior to native diff --git a/apps/docs/content/components/form/controlled.raw.jsx b/apps/docs/content/components/form/controlled.raw.jsx index 5e8efc9901..7160395070 100644 --- a/apps/docs/content/components/form/controlled.raw.jsx +++ b/apps/docs/content/components/form/controlled.raw.jsx @@ -13,7 +13,7 @@ export default function App() { }; return ( -
+ + { diff --git a/apps/docs/content/components/form/custom-validation-aria.raw.jsx b/apps/docs/content/components/form/custom-validation-aria.raw.jsx new file mode 100644 index 0000000000..0b02ae3fc4 --- /dev/null +++ b/apps/docs/content/components/form/custom-validation-aria.raw.jsx @@ -0,0 +1,30 @@ +import {Form, Input, Button} from "@nextui-org/react"; + +export default function App() { + const onSubmit = (e) => { + e.preventDefault(); + }; + + return ( + + { + if (value.length < 3) { + return "Username must be at least 3 characters long"; + } + + return value === "admin" ? "Nice try!" : null; + }} + /> + +
+ ); +} diff --git a/apps/docs/content/components/form/custom-validation-aria.ts b/apps/docs/content/components/form/custom-validation-aria.ts new file mode 100644 index 0000000000..f84220c7dd --- /dev/null +++ b/apps/docs/content/components/form/custom-validation-aria.ts @@ -0,0 +1,9 @@ +import App from "./custom-validation-aria.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/form/custom-validation.raw.jsx b/apps/docs/content/components/form/custom-validation.raw.jsx index 2d33795a0c..6c8dde5b1d 100644 --- a/apps/docs/content/components/form/custom-validation.raw.jsx +++ b/apps/docs/content/components/form/custom-validation.raw.jsx @@ -6,7 +6,7 @@ export default function App() { }; return ( -
+ setSubmitted(null)} onSubmit={onSubmit} diff --git a/apps/docs/content/components/form/events.raw.jsx b/apps/docs/content/components/form/events.raw.jsx index 798afc0753..3f4d184b58 100644 --- a/apps/docs/content/components/form/events.raw.jsx +++ b/apps/docs/content/components/form/events.raw.jsx @@ -6,7 +6,6 @@ export default function App() { return ( setAction("reset")} onSubmit={(e) => { e.preventDefault(); diff --git a/apps/docs/content/components/form/form-usage.raw.jsx b/apps/docs/content/components/form/form-usage.raw.jsx index f8af6d3de3..00ef545b21 100644 --- a/apps/docs/content/components/form/form-usage.raw.jsx +++ b/apps/docs/content/components/form/form-usage.raw.jsx @@ -12,7 +12,7 @@ export default function App() { }; return ( - + + + { e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -21,7 +20,6 @@ export default function App() { length={4} name="otp" placeholder="Enter code" - validationBehavior="native" />
@@ -778,7 +778,7 @@ describe("Autocomplete", () => { it("supports server validation", async () => { const {getByTestId, getByRole} = render( - + , ); diff --git a/packages/components/checkbox/__tests__/checkbox-group.test.tsx b/packages/components/checkbox/__tests__/checkbox-group.test.tsx index 9e604b410b..7458893bac 100644 --- a/packages/components/checkbox/__tests__/checkbox-group.test.tsx +++ b/packages/components/checkbox/__tests__/checkbox-group.test.tsx @@ -294,12 +294,8 @@ describe("Checkbox.Group", () => { }; return ( -
- + + Terms and conditions Cookies Privacy policy diff --git a/packages/components/checkbox/stories/checkbox-group.stories.tsx b/packages/components/checkbox/stories/checkbox-group.stories.tsx index 6182918020..d7453892b6 100644 --- a/packages/components/checkbox/stories/checkbox-group.stories.tsx +++ b/packages/components/checkbox/stories/checkbox-group.stories.tsx @@ -153,12 +153,7 @@ const ServerValidationTemplate = (args: CheckboxGroupProps) => { validationErrors={serverErrors} onSubmit={onSubmit} > - + Terms and conditions Cookies Privacy policy diff --git a/packages/components/checkbox/stories/checkbox.stories.tsx b/packages/components/checkbox/stories/checkbox.stories.tsx index 66824af903..69bccee121 100644 --- a/packages/components/checkbox/stories/checkbox.stories.tsx +++ b/packages/components/checkbox/stories/checkbox.stories.tsx @@ -180,7 +180,7 @@ const WithFormTemplate = (args: CheckboxProps) => { }; return ( - + { it("supports validate function", async () => { const {getByRole, getByTestId} = render( - + (v.year < 2022 ? "Invalid value" : null)} - validationBehavior="native" /> , ); @@ -831,8 +830,8 @@ describe("DatePicker", () => { }; return ( -
- + + @@ -871,7 +870,7 @@ describe("DatePicker", () => { describe("validationBehavior=aria", () => { it("supports minValue and maxValue", async () => { const {getByRole} = render( - + { it("supports validate function", async () => { const {getByRole} = render( - + { it("supports server validation", async () => { const {getByRole} = render( - + , ); diff --git a/packages/components/form/src/form.tsx b/packages/components/form/src/form.tsx index bfa900f157..30b8c2e1e5 100644 --- a/packages/components/form/src/form.tsx +++ b/packages/components/form/src/form.tsx @@ -8,7 +8,7 @@ import {Form as AriaForm, FormProps} from "./base-form"; export const Form = forwardRef(function Form(props: FormProps, ref: ForwardedRef) { const globalContext = useProviderContext(); const validationBehavior = - props.validationBehavior ?? globalContext?.validationBehavior ?? "aria"; + props.validationBehavior ?? globalContext?.validationBehavior ?? "native"; return ; }); diff --git a/packages/components/input-otp/stories/input-otp.stories.tsx b/packages/components/input-otp/stories/input-otp.stories.tsx index 3726f36d51..209795f3ad 100644 --- a/packages/components/input-otp/stories/input-otp.stories.tsx +++ b/packages/components/input-otp/stories/input-otp.stories.tsx @@ -129,7 +129,6 @@ const RequiredTemplate = (args) => { length={4} name="otp" placeholder="Enter code" - validationBehavior="native" {...args} /> @@ -442,7 +446,7 @@ describe("Input with React Hook Form", () => { describe('validationBehavior="aria"', () => { it("supports validate function", async () => { const {getByTestId} = render( - + { it("supports server validation", async () => { const {getByTestId} = render( - + , );