diff --git a/docs/src/components/navigation/docs_navigation.tsx b/docs/src/components/navigation/docs_navigation.tsx
index b774367..92d251e 100644
--- a/docs/src/components/navigation/docs_navigation.tsx
+++ b/docs/src/components/navigation/docs_navigation.tsx
@@ -55,6 +55,28 @@ export const DocsNavigation = () => {
reset
+
+
+ setError
+
+
+
+
+ clearErrors
+
+
{
+ return (
+
+ clearErrors - createForm
+
+
+
+
+ clearErrors
+
+ This function can manually clear errors in the form.
+
+ {`(name?: string | string[]) => void`}
+
+ Props
+
+
+
+ {[
+ ["Type", "Description", "Example"],
+ ["undefined", "Remove all errors.", "clearErrors()"],
+ ["string", "Remove single error.", 'clearErrors("email")'],
+ ["string[]", "Remove multiple errors.", 'clearErrors(["email", "password"])']
+ ]}
+
+
+ {`import { createForm } from "solid-hook-form"
+
+export const ExampleForm = () => {
+ const form = useForm()
+ const {
+ register,
+ formState: { errors },
+ handleSubmit,
+ clearErrors
+ } = form
+
+ const onSubmit = (data) => {
+ console.log(data)
+ }
+
+ return (
+
+ )
+}`}
+
+
+
+ );
+};
+
+export default ClearErrors;
diff --git a/docs/src/routes/docs/create-form/index.tsx b/docs/src/routes/docs/create-form/index.tsx
index 4d63602..9e2774a 100644
--- a/docs/src/routes/docs/create-form/index.tsx
+++ b/docs/src/routes/docs/create-form/index.tsx
@@ -191,6 +191,16 @@ const ExampleForm = () => {
reset
+
+
+ setError
+
+
+
+
+ clearErrors
+
+
setValue
diff --git a/docs/src/routes/docs/create-form/set-error.tsx b/docs/src/routes/docs/create-form/set-error.tsx
new file mode 100644
index 0000000..07d0960
--- /dev/null
+++ b/docs/src/routes/docs/create-form/set-error.tsx
@@ -0,0 +1,104 @@
+import { Title } from "@solidjs/meta";
+import { Code } from "~/components/code/code";
+import { Container } from "~/components/container/container";
+import { DocsNavigation } from "~/components/navigation/docs_navigation";
+import { Table } from "~/components/table/table";
+
+const SetError = () => {
+ return (
+
+ setError - createForm
+
+
+
+
+ setError
+
+ This function allows you to manually set one or more errors.
+
+ {`(name: string, error: FieldError, options?: SetErrorOptions) => void`}
+
+ Props
+
+
+
+ {[
+ ["Name", "Type", "Description"],
+ ["name", "string", "Input's name."],
+ ["error", "FieldError", "Set an error with its type and message."],
+ [
+ "options.shouldFocus",
+ "boolean",
+ "Should focus the input during setting an error. This only works when the input's reference is registered."
+ ]
+ ]}
+
+
+ Rules
+
+
+
+
+ This method will not persist the associated input error if the input passes register's
+ associated rules.
+
+
+ An error that is not associated with an input field will be persisted until cleared
+ with clearErrors.
+
+
+ Can be useful in the handleSubmit method when you want to give error feedback to a
+ user after async validation (for instance API returns validation errors).
+
+
+
+ {`import { createForm } from "solid-hook-form"
+
+export const ExampleForm = () => {
+ const form = createForm({
+ defaultValues: {
+ email: ""
+ }
+ })
+ const { formState, register, handleSubmit, setError } = form
+ const { errors } = formState
+
+ const onSubmit = async (values) => {
+ const response = await fetch("/api/validate", {
+ method: "POST",
+ body: JSON.stringify(values)
+ })
+
+ if (response.status !== 200) {
+ setError("email", {
+ type: response.status.toString()
+ message: "This email is already in use"
+ })
+ }
+ }
+
+ return (
+
+ )
+}`}
+
+
+
+ );
+};
+
+export default SetError;
diff --git a/docs/src/routes/examples/async-validation.tsx b/docs/src/routes/examples/async-validation.tsx
new file mode 100644
index 0000000..89298d9
--- /dev/null
+++ b/docs/src/routes/examples/async-validation.tsx
@@ -0,0 +1,84 @@
+/** biome-ignore-all lint/suspicious/noUselessEscapeInString: regex escape */
+
+import { Title } from "@solidjs/meta";
+import { Link } from "solid-uix";
+import { Code } from "~/components/code/code";
+import { Container } from "~/components/container/container";
+
+const AsyncValidation = () => {
+ return (
+
+ Async Validation
+
+ Async Validation
+
+
+ You can find full example at{" "}
+
+ StackBlitz
+
+ .
+
+
+ Set validation error manually after server response:
+
+ {`import { createForm } from 'solid-hook-form'
+import { createSignal } from 'solid-js'
+
+export const ExampleForm = () => {
+ const form = createForm({
+ defaultValues: {
+ email: ''
+ },
+ mode: 'onChange'
+ })
+ const {
+ errors,
+ register,
+ handleSubmit,
+ setError
+ } = form
+
+ const [isLoading, setIsLoading] = createSignal(false)
+
+ const onSubmit = (values: ExampleFormValues) => {
+ setIsLoading(true)
+
+ fetch('/api/validation')
+ .then(response => {
+ if (response.status !== 200) {
+ setError('email', {
+ type: 'custom',
+ message: 'This email is already in use'
+ })
+ }
+ })
+ .finally(() => {
+ setIsLoading(false)
+ })
+ }
+
+ return (
+
+ )
+}`}
+
+
+ );
+};
+
+export default AsyncValidation;
diff --git a/docs/src/routes/examples/index.tsx b/docs/src/routes/examples/index.tsx
index d624334..5597c49 100644
--- a/docs/src/routes/examples/index.tsx
+++ b/docs/src/routes/examples/index.tsx
@@ -1,10 +1,11 @@
-import { Title } from "@solidjs/meta";
-import { Container } from "~/components/container/container";
-import { Grid } from "~/components/grid/grid";
-import check from "@phosphor-icons/core/regular/check-circle.svg?raw";
import curly from "@phosphor-icons/core/regular/brackets-curly.svg?raw";
+import check from "@phosphor-icons/core/regular/check-circle.svg?raw";
+// import server from "@phosphor-icons/core/regular/cloud-check.svg?raw";
import upload from "@phosphor-icons/core/regular/upload-simple.svg?raw";
+import { Title } from "@solidjs/meta";
+import { Container } from "~/components/container/container";
import { Footer } from "~/components/footer/footer";
+import { Grid } from "~/components/grid/grid";
const Examples = () => {
return (
@@ -36,6 +37,14 @@ const Examples = () => {
Integrate Yup schema validation into your form.
+
+
+ {/* */}
+ Async Validation
+
+ Give error feedback to a user after server-side validation.
+
+