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 5599c6385e..30daa8b6c2 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..8e8ccc32f4 --- /dev/null +++ b/apps/docs/content/components/form/custom-validation-aria.raw.jsx @@ -0,0 +1,30 @@ +import {Form, Input, Button} from "@heroui-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 00a8ee0f88..081b106606 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 88fa322420..88e21ee6d2 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 05bbf9913f..f2ace0a938 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" />
@@ -881,7 +881,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 0ba290346a..433a9da842 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 559892666a..fc8cb138db 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 01a2888dbb..a1647948a1 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" /> , ); @@ -842,8 +841,8 @@ describe("DatePicker", () => { }; return ( -
- + + @@ -882,7 +881,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 56b56fc2a6..0ce3393d72 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 4804242b38..0cad703faf 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( - + , );