Feature Request: Ability to validate input on form change or on input change about zsa

[discoverlance-com]

I see so it looks like it will not be possible ideally then... mostly given that the action and schema created is basically in a server action.

I think the best bet might be that given a createSeverAction from zsa, we can extract out the input object and then pass it into another custom hook like the useValidated form above:

// action.ts
"use server"

import { createServerAction } from "zsa"
import { incrementSchema } from '@/lib/zod/schema'
import z from "zod"

export const incrementNumberAction = createServerAction() 
    .input(incrementSchema)
    .handler(async ({ input }) => {
        // Sleep for .5 seconds
        await new Promise((resolve) => setTimeout(resolve, 500))
        // Increment the input number by 1
        return input.number + 1;
    });

// lib/zod/schema.ts
import { z } from 'zod';
export const incrementSchema = z.object({
        number: z.number()
    });

// increment.tsx
const [data, err] = await incrementNumberAction({ number: 24 });  // or  
const { isPending, execute, data, error, isError } = useServerAction(incrementNumberAction);
// and then for the client one
const { errors, setErrors, handleChange, hasErrors } = useValidatedForm(incrementSchema);

The problem now is that the errors can now be accessed from two different places even though it's the same zod schema so it will now be difficult to know which error to use or go for as you have two source of truths which is not the best and you will have to check the errors from two places.

But will this also not work the same way with the useServerAction hook if we still put our zod schema in a different file and then, we can import it into our server action and also the useServerAction hook and add that functionality? Or create another hook that does a similar thing to useServerAction but allows you to pass in a zod schema to get client side error handling?

// action.tsx
"use server"

import { createServerAction } from "zsa"
import { incrementSchema } from '@/lib/zod/schema'
import z from "zod"

export const incrementNumberAction = createServerAction() 
    .input(incrementSchema)
    .handler(async ({ input }) => {
        // Sleep for .5 seconds
        await new Promise((resolve) => setTimeout(resolve, 500))
        // Increment the input number by 1
        return input.number + 1;
    });

// lib/zod/schema.ts
import { z } from 'zod';
export const incrementSchema = z.object({
        number: z.number()
    });

// increment.tsx
const { isPending, execute, data, error, isError, handleInputChange, handleFormChange } 
= useServerAction(incrementNumberAction, incrementSchema);
// or another hook that accepts a schema as a second parameter and we keep useServerAction as is
const { isPending, execute, data, error, isError, handleInputChange, handleFormChange } 
= useClientAction(incrementNumberAction, incrementSchema);

[IdoPesok]

Hi, thank you for this detailed request and the code snippet.

Since zsa-react-zod functions like useServerAction has access to the schema

Unfortunately useServerAction actually does not have access to the schema from the action alone. This is because only async functions can be exported from the use server files where the actions are stored. To get access to the schema on the client one can:

1. Define a shared schema in its own file then import it in the server context and client context.
2. Send the schema over the network by serializing it then deserializing it on the client.

Option 1 in this case is better because you wouldn't want to wait for the schema to arrive to be able to show the client component.

From my understanding, react-hook-form already does this on change validation with resolvers. I think if zsa-react did have access to the schemas directly from actions -> it would make sense to include a function like this in the hook. However, since it doesn't have access to the schema, it pretty much turns into the exact same thing as react hook form resolvers where you need to pass your own schema.

If you find a way around this limitation, happy to review.

[IdoPesok]

Maybe an optional second arg to useServerAction and if that arg is passed in then it will return the extra schema hooks?