chimame/conform-to-valibot

conform-to-valibot

Conform helpers for integrating with Valibot

Installation

npm install @conform-to/react valibot conform-to-valibot

API Reference

• parseWithValibot
• getValibotConstraint

parseWithValibot

It parses the formData and returns a submission result with the validation error. If no error is found, the parsed data will also be populated as submission.value.

import { useForm } from '@conform-to/react';
import { parseWithValibot } from 'conform-to-valibot';
import { object, string } from 'valibot';

const schema = object({
  email: string('Email is required' ),
  password: string('Password is required' ),
});

function ExampleForm() {
  const [form, { email, password }] = useForm({
    onValidate({ formData }) {
      return parseWithValibot(formData, {
        schema,
      });
    },
  });

  // ...
}

Or when parsing the formData on server side (e.g. Remix):

import { useForm } from '@conform-to/react';
import { parseWithValibot } from 'conform-to-valibot';
import { object } from 'valibot';

const schema = object({
  // Define the schema with valibot
});

export async function action({ request }) {
  const formData = await request.formData();
  const submission = await parseWithValibot(formData, {
    schema,
  });

  // Send the submission back to the client if the status is not successful
  if (submission.status !== 'success') {
    return submission.reply();
  }

  // ...
}

getValibotConstraint

A helper that returns an object containing the validation attributes for each field by introspecting the valibot schema.

import { getValibotConstraint } from "conform-to-valibot";
import { useForm } from "@conform-to/react";
import { object, string, minLength, maxLength, optional } from "valibot";

const schema = object({
  title: string([minLength(10), maxLength(100)]),
  description: optional(string([minLength(100), maxLength(1000)])),
});

function Example() {
  const [form, fields] = useForm({
    constraint: getValibotConstraint(schema),
  });

  // ...
}

conform-to-valibot's Issues

support AnySchema

Question: Async validation

Hello,

Are there any plans to support async validation when parsing data on the server e.g. https://conform.guide/validation#async-validation?

Thanks for the brilliant library!

Add ohelper that can generate constraints for useForm

In Conform, constraint of useForm can be set. @conform-to/zod has a helper that generates a definition to be passed to constraint from Zod's schema.
It would be nice to be able to provide a helper that generates something similar from the Valibot schema.

https://conform.guide/api/react/useForm

https://github.com/edmundhung/conform/blob/main/packages/conform-zod/constraint.ts#L31

Supports Valibot's new pipe function

Compatible with Valibot's new pipe function

Valibot is expected to release a version with a new pipe function in the next version. The official change is scheduled for June, so we will need to make modifications to accommodate it.

fabian-hiller/valibot#502

support BlobSchema