React Hook Form Resolvers

Integrate VineJS using vineResolver.

import { useForm } from 'react-hook-form';
import { vineResolver } from '@hookform/resolvers/vine';
import vine from '@vinejs/vine';

const schema = vine.compile(
  vine.object({
    username: vine.string().minLength(1),
    password: vine.string().minLength(1),
  }),
);

const App = () => {
  const { register, handleSubmit } = useForm({
    resolver: vineResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register('username')} />
      <input {...register('password')} />
      <input type="submit" />
    </form>
  );
};

Integrate ArkType using arktypeResolver.

import { useForm } from 'react-hook-form';
import { arktypeResolver } from '@hookform/resolvers/arktype';
import { type } from 'arktype';

const schema = type({
  username: 'string>1',
  password: 'string>1',
});

const App = () => {
  const { register, handleSubmit } = useForm({
    resolver: arktypeResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register('username')} />
      <input {...register('password')} />
      <input type="submit" />
    </form>
  );
};

Integrate typanion using typanionResolver.

import { useForm } from 'react-hook-form';
import { typanionResolver } from '@hookform/resolvers/typanion';
import * as t from 'typanion';

const isUser = t.isObject({
  username: t.applyCascade(t.isString(), [t.hasMinLength(1)]),
  age: t.applyCascade(t.isNumber(), [
    t.isInteger(),
    t.isInInclusiveRange(1, 100),
  ]),
});

const App = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: typanionResolver(isUser),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register('name')} />
      {errors.name?.message && <p>{errors.name?.message}</p>}
      <input type="number" {...register('age')} />
      <input type="submit" />
    </form>
  );
};

Use fluentValidationResolver to integrate fluentvalidation-ts synchronous validators with react-hook-form. Pass an instance of a Validator class to the function to create a compatible resolver.

import { Validator } from 'fluentvalidation-ts';
import { fluentValidationResolver } from '@hookform/resolvers/fluentvalidation-ts';
import { useForm } from 'react-hook-form';

class SchemaValidator extends Validator<Schema> {
  constructor() {
    super();
    this.ruleFor('username').notEmpty();
    this.ruleFor('password').notEmpty();
  }
}

const validator = new SchemaValidator();

const { register, handleSubmit } = useForm({
  resolver: fluentValidationResolver(validator)
});

The typeschemaResolver function creates a react-hook-form compatible resolver using a schema that implements the StandardSchemaV1 specification.

It accepts a schema and an optional resolverOptions object. If resolverOptions.raw is set to true, the resolver returns the original input values instead of the parsed/transformed output values.

Parameters

• schema: A StandardSchemaV1 compliant schema.
• resolverOptions (optional):
  • raw: A boolean. If true, the resolver returns the input values as they are. If false (default), it returns the validated/transformed output from the schema.

const schema = z.object({
  name: z.string().required(),
  age: z.number().required(),
});

useForm({
  resolver: typeschemaResolver(schema)
});