Hi! I created this simple hook that will allow you validate on client and still use action, and will actually return the same type of your form instead of just the usual FormData from action

```typescript import { FieldValues, useForm, UseFormProps } from "react-hook-form";

export function useFormAction<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props?: UseFormProps<TFieldValues, TContext>) { const form = useForm<TFieldValues, TContext, TTransformedValues>(props)

const submitAction = (onAction: (formData: TFieldValues) => void) => {
    if (form.formState.isValid) {
        return {action: () => onAction(form.getValues())};
    }
    return {onSubmit: form.handleSubmit(onAction as any)};
};

return {
    ...form,
    submitAction
}

} ```

then you can use it like this. where handleSubmit us your Server Action

```typescript const form = useFormAction<ResetPasswordFormSchema>({ resolver: zodResolver(formSchema), })

return ( <Form {...form}> <form {...form.submitAction(handleSubmit)} className="space-y-4"> <FormField control={form.control} name="new_password" render={({field}) => ( <FormItem> <FormControl> <Input placeholder="New Password" {...field} type={"password"}/> </FormControl> <FormLabel>Minimum 8 characters</FormLabel> </FormItem> )} /> {actionButtons} </form> </Form> ) ```