React Hook Form 和 Valibot 中条件必需输入字段的问题

Question

我正在开发一个 React Native 项目，其中我使用 React Hook Form 来创建动态表单，并使用 Valibot 来进行验证。我有一个场景，我需要根据某些条件隐藏一些输入字段。但是，在特定条件下，这些字段也是必需的。

我尝试过使用注册和取消注册来处理这个问题，但它似乎没有按预期工作。当我隐藏输入时，我不希望它被验证，但是当它可见时，它应该是必需的。

任何人都可以指导我如何在使用 Valibot 时正确管理条件输入并在 React Hook Form 中进行验证吗？任何帮助将不胜感激。

Answer 1

我在 nextjs 项目中使用 zod 进行验证。我在我的项目中遇到了类似的问题，当类型为 Subscription 时，一天中的一周的选择应该是数字数组，当类型为 oneTime 时，选择 null 。这是我的方法。

import { z } from "zod";

const schema = z
  .object({
    type: z.string().min(1),
    recurrence: z.array(z.number().or(z.string())).optional(),
  })
  .refine(
    (data) => {
      if (data.type === "subscription" && !data.recurrence) {
        return !!data.recurrence;
      }
      return true;
    },
    {
      path: ["recurrence"],
      message: "Please select at least one day.",
    }
  );

export default schema;

这里可以在refine方法中访问通过form的数据，并且可以进行自定义验证。也许valibot中也有类似的方法（检查文档的方法）