@erboladaiteas/exercitationem-totam NPM

Install

npm install @erboladaiteas/exercitationem-totam

API

type Options = {
  mode: 'async' | 'sync',
  raw?: boolean
}

resolver(schema: object, schemaOptions?: object, resolverOptions: Options)

	type	Required	Description
schema	`object`	✓	validation schema
schemaOptions	`object`		validation library schema options
resolverOptions	`object`		resolver options, `async` is the default mode

Quickstart

Yup

Dead simple Object schema validation.

import { useForm } from 'react-hook-form';
import { yupResolver } from '@erboladaiteas/exercitationem-totam/yup';
import * as yup from 'yup';

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

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

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

Zod

TypeScript-first schema validation with static type inference

⚠️ Example below uses the valueAsNumber, which requires react-hook-form v6.12.0 (released Nov 28, 2020) or later.

import { useForm } from 'react-hook-form';
import { zodResolver } from '@erboladaiteas/exercitationem-totam/zod';
import * as z from 'zod';

const schema = z.object({
  name: z.string().min(1, { message: 'Required' }),
  age: z.number().min(10),
});

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

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

Superstruct

A simple and composable way to validate data in JavaScript (or TypeScript).

import { useForm } from 'react-hook-form';
import { superstructResolver } from '@erboladaiteas/exercitationem-totam/superstruct';
import { object, string, number } from 'superstruct';

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

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

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register('name')} />
      <input type="number" {...register('age', { valueAsNumber: true })} />
      <input type="submit" />
    </form>
  );
};

Joi

The most powerful data validation library for JS.

import { useForm } from 'react-hook-form';
import { joiResolver } from '@erboladaiteas/exercitationem-totam/joi';
import Joi from 'joi';

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

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

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

Vest

Vest 🦺 Declarative Validation Testing.

import { useForm } from 'react-hook-form';
import { vestResolver } from '@erboladaiteas/exercitationem-totam/vest';
import { create, test, enforce } from 'vest';

const validationSuite = create((data = {}) => {
  test('username', 'Username is required', () => {
    enforce(data.username).isNotEmpty();
  });

  test('password', 'Password is required', () => {
    enforce(data.password).isNotEmpty();
  });
});

const App = () => {
  const { register, handleSubmit, errors } = useForm({
    resolver: vestResolver(validationSuite),
  });

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

Class Validator

Decorator-based property validation for classes.

⚠️ Remember to add these options to your tsconfig.json!

"strictPropertyInitialization": false,
"experimentalDecorators": true

import { useForm } from 'react-hook-form';
import { classValidatorResolver } from '@erboladaiteas/exercitationem-totam/class-validator';
import { Length, Min, IsEmail } from 'class-validator';

class User {
  @Length(2, 30)
  username: string;

  @IsEmail()
  email: string;
}

const resolver = classValidatorResolver(User);

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

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input type="text" {...register('username')} />
      {errors.username && <span>{errors.username.message}</span>}
      <input type="text" {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}
      <input type="submit" value="Submit" />
    </form>
  );
};

io-ts

Validate your data with powerful decoders.

import React from 'react';
import { useForm } from 'react-hook-form';
import { ioTsResolver } from '@erboladaiteas/exercitationem-totam/io-ts';
import t from 'io-ts';
// you don't have to use io-ts-types, but it's very useful
import tt from 'io-ts-types';

const schema = t.type({
  username: t.string,
  age: tt.NumberFromString,
});

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

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

export default App;

Nope

A small, simple, and fast JS validator

import { useForm } from 'react-hook-form';
import { nopeResolver } from '@erboladaiteas/exercitationem-totam/nope';
import Nope from 'nope-validator';

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

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

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

computed-types

TypeScript-first schema validation with static type inference

import { useForm } from 'react-hook-form';
import { computedTypesResolver } from '@erboladaiteas/exercitationem-totam/computed-types';
import Schema, { number, string } from 'computed-types';

const schema = Schema({
  username: string.min(1).error('username field is required'),
  age: number,
});

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

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

typanion

Static and runtime type assertion library with no dependencies

import { useForm } from 'react-hook-form';
import { typanionResolver } from '@erboladaiteas/exercitationem-totam/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')} />
      {errors.age?.message && <p>{errors.age?.message}</p>}
      <input type="submit" />
    </form>
  );
};

Ajv

The fastest JSON validator for Node.js and browser

import { useForm } from 'react-hook-form';
import { ajvResolver } from '@erboladaiteas/exercitationem-totam/ajv';

// must use `minLength: 1` to implement required field
const schema = {
  type: 'object',
  properties: {
    username: {
      type: 'string',
      minLength: 1,
      errorMessage: { minLength: 'username field is required' },
    },
    password: {
      type: 'string',
      minLength: 1,
      errorMessage: { minLength: 'password field is required' },
    },
  },
  required: ['username', 'password'],
  additionalProperties: false,
};

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

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('username')} />
      {errors.username && <span>{errors.username.message}</span>}
      <input {...register('password')} />
      {errors.password && <span>{errors.password.message}</span>}
      <button type="submit">submit</button>
    </form>
  );
};

TypeBox

JSON Schema Type Builder with Static Type Resolution for TypeScript

import { useForm } from 'react-hook-form';
import { typeboxResolver } from '@erboladaiteas/exercitationem-totam/typebox';
import { Type } from '@sinclair/typebox';

const schema = Type.Object({
  username: Type.String({ minLength: 1 }),
  password: Type.String({ minLength: 1 }),
});

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

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

ArkType

TypeScript's 1:1 validator, optimized from editor to runtime

import { useForm } from 'react-hook-form';
import { arktypeResolver } from '@erboladaiteas/exercitationem-totam/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 type="password" {...register('password')} />
      <input type="submit" />
    </form>
  );
};

Valibot

The modular and type safe schema library for validating structural data

import { useForm } from 'react-hook-form';
import { valibotResolver } from '@erboladaiteas/exercitationem-totam/valibot';
import { object, string, minLength, endsWith } from 'valibot';

const schema = object({
  username: string('username is required', [
    minLength(3, 'Needs to be at least 3 characters'),
    endsWith('cool', 'Needs to end with `cool`'),
  ]),
  password: string('password is required'),
});

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

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

effect-ts

A powerful TypeScript framework that provides a fully-fledged functional effect system with a rich standard library.

import React from 'react';
import { useForm } from 'react-hook-form';
import { effectTsResolver } from '@erboladaiteas/exercitationem-totam/effect-ts';
import { Schema } from '@effect/schema';

const schema = Schema.Struct({
  username: Schema.String.pipe(
    Schema.nonEmpty({ message: () => 'username required' }),
  ),
  password: Schema.String.pipe(
    Schema.nonEmpty({ message: () => 'password required' }),
  ),
});

type FormData = Schema.Schema.Type<typeof schema>;

interface Props {
  onSubmit: (data: FormData) => void;
}

function TestComponent({ onSubmit }: Props) {
  const {
    register,
    handleSubmit,
    formState: { errors },
    // provide generic if TS has issues inferring types
  } = useForm<FormData>({
    resolver: effectTsResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username')} />
      {errors.username && <span role="alert">{errors.username.message}</span>}

      <input {...register('password')} />
      {errors.password && <span role="alert">{errors.password.message}</span>}

      <button type="submit">submit</button>
    </form>
  );
}

Backers

Thanks goes to all our backers! [Become a backer].

Contributors

Thanks goes to these wonderful people! [Become a contributor].

mock emr vars style text width id framer link regular expression tape ECMAScript 6 descriptor Array.prototype.findLast _.extend push TypeBox dom-testing-library deep-copy feed group local rds apollo search path pose String.prototype.matchAll iterate types child walk coercible router look-up call-bound prototype entries ES2023 getter isConcatSpreadable vest package.json fork unicode fast-copy typanion spinners xhr [[Prototype]]colour Array.prototype.flatMap resolve vpc weakmap StyleSheet a11y argument https fastcopy ajv es2015 karma phone picomatch diff browserslist icu east-asian-width setPrototypeOf deep includes readable es5 react pose ES2019 256 zx is chai error effect-ts optimizer agent remove rfc4122 dataview negative strip eslintconfig ReactiveExtensions shell matches delete installer rm -fr bound ramda busy proto browser assign shebang accessor BigUint64Array ES2021 ECMAScript 2021 classnames offset toStringTag Promise parse coverage whatwg graphql Object zero call commander classes Array.prototype.contains starter look idle JSON setter getPrototypeOf Push clone key value ECMAScript 2020 function es-abstract uninstall i18n ECMAScript 2022 jshint validate json cache copy react animation pretty regular-expression charset enumerable execfile art ecmascript Uint8Array parent buffers workspace:*internal eslint-plugin RegExp#flags serializer typeof byte mobile cjk Float32Array syntaxerror package trimStart functional input assertion once fetch regex argv libphonenumber find-up intrinsic hasOwnProperty reducer polyfill bdd queueMicrotask back-end modules equal regular expressions spec sqs weakset styleguide joi bind Symbol es-shims stringifier chromium io-ts check client beanstalk ES2020 URL terminal flat plugin guid serialization pino uuid mapreduce time up express superagent import ES2017 rm -rf sharedarraybuffer binaries values streams zod immer styling settings react-hook-form efficient console tc39 require HyBi defineProperty gdpr Set cloudsearch yup forms callback collection.es6 hash callbound move swf callbind workflow env fs ES7 fast-clone request positive touch Function.prototype.name byteOffset cli every data environment dependency manager nodejs sinatra deep-clone ponyfill waapi hookform util private prefix 0 postcss ebs symbol cloudfront has hasOwn obj transport make dir queue writable preprocessor redux Float64Array from get styled-components dynamodb regexp stream characters properties prop last http negative zero moment string keys fixed-width curried drag spawn which schema events Uint8ClampedArray es reuse rework mkdirs ECMAScript 2018 array fps parser flatten configurable indicator full core-js AsyncIterator Object.is find debugger point-free front-end pyyaml ses Array.prototype.flatten bundling popmotion warning asserts monorepo shim traverse Object.fromEntries reversed awesomesauce mkdirp ES2016 file patch rm es2018 regular typescript extend ansi eslintplugin color packages cloudwatch package manager eventEmitter invariant es8 Iterator syntax getOwnPropertyDescriptor make gestures testing tdd escape jsx assert Stream rss typeerror ie ReactiveX json Object.getPrototypeOf language flag pipe stringify emit restful iterator runtime ignore eventDispatcher symlinks worker type real-time subprocess match native full-width chrome html term pure Observable compiler slice trimLeft cloudformation symbols speed ESnext sns Uint32Array debug glacier form findLastIndex Object.entries listeners robust protobuf create yaml omit sham jsdiff RegExp.prototype.flags chinese handler trim spinner Object.keys

@dramateas/facilis-quae-omnis-consequatur @dramateas/magni-explicabo-esse-magnam @dramateas/quis-nisi-error-quos @dramateas/quos-aut-natus-odit @dramateas/recusandae-molestiae-mollitia-modi @dramateas/recusandae-perferendis-accusantium-architecto @dramateas/unde-porro-quidem-distinctio @dramateas/ut-distinctio-aliquam-est @erboladaiteas/accusantium-nobis-amet @erboladaiteas/aperiam-vitae-accusamus-fugiat @erboladaiteas/architecto-modi-illo-dolorum @erboladaiteas/at-officiis-nostrum-odit @erboladaiteas/corporis-iusto-autem-voluptate @erboladaiteas/culpa-est-magnam-autem @erboladaiteas/dolorem-quasi-provident-expedita @erboladaiteas/earum-non-facere-mollitia @erboladaiteas/enim-saepe-aliquid-perspiciatis @erboladaiteas/esse-labore-ea-facere @erboladaiteas/ex-excepturi-neque-perferendis @erboladaiteas/id-quas-adipisci-velit @erboladaiteas/illum-odio-impedit @erboladaiteas/in-cum-autem-corporis @erboladaiteas/ipsa-officiis-eaque-provident @erboladaiteas/itaque-quidem-inventore @erboladaiteas/mollitia-vero-consequatur-nihil @erboladaiteas/nostrum-aut-dignissimos-in @erboladaiteas/numquam-beatae-illum-explicabo @erboladaiteas/odio-consequuntur-at-atque @erboladaiteas/omnis-at-facilis @erboladaiteas/perferendis-fugit-ad-facere @erboladaiteas/quasi-ullam-placeat-consequuntur @erboladaiteas/recusandae-possimus-blanditiis-nemo @erboladaiteas/sequi-ullam-est @erboladaiteas/tempore-repudiandae-ullam-nulla @erboladaiteas/voluptas-reiciendis-veritatis-suscipit @juiggitea/aperiam-facilis-molestias-mollitia @juiggitea/corporis-doloribus-alias-voluptas @juiggitea/possimus-impedit-est-sint @juiggitea/possimus-quos-sint-dolorem @juiggitea/praesentium-porro-voluptates-officiis @juiggitea/sapiente-soluta-minima-fuga @juiggitea/ut-nostrum-temporibus-autem @kollusietea/ad-commodi-temporibus-ex @kollusietea/consequuntur-nam-tempora-expedita @kollusietea/incidunt-veniam-maxime-dicta @kollusietea/neque-officiis-molestias-a @kollusietea/quidem-enim-ad-numquam @kollusietea/saepe-iure-soluta-facilis @kollusietea/vero-fugit-voluptatem-accusamus @kollusietea/voluptate-porro-magnam-et @swenkertrea/asperiores-suscipit-saepe-hic @swenkertrea/corporis-consequuntur-qui-esse @swenkertrea/fugiat-consequatur-et-occaecati @swenkertrea/id-earum-blanditiis-ullam @swenkertrea/sed-ducimus-consectetur-maxime @swenkertrea/ut-illo-aliquid-illum @zittertea/aliquam-asperiores-veritatis-totam @zittertea/dignissimos-harum-sint-alias @zittertea/minima-nisi-placeat-cupiditate @zittertea/rerum-totam-officia-laudantium

1.0.0

6 months ago

@erboladaiteas/exercitationem-totam v1.0.0