Formik

When I first wrote fluentvalidation-ts, I had seamless integration with Formik in mind.

The ValidationErrors object returned by the .validate function has been designed to "just work" with Formik, so you can start using the two together with minimal effort.

If you're not familiar with Formik, it's a fantastic library for writing forms in React.

Usage

To use fluentvalidation-ts with Formik, simply define a Validator for your form model, instantiate an instance of your validator, then pass the validator's .validate method to Formik's validate prop:

import { Formik } from 'formik';
import { Validator } from 'fluentvalidation-ts';

type FormModel = { username: string };

class MyFormValidator extends Validator<FormModel> {
  constructor() {
    super();
    this.ruleFor('username').notEmpty().withMessage('Please enter your username');
  }
}

const formValidator = new MyFormValidator();

export const MyForm = () => (
  <Formik<FormModel>
    validate={formValidator.validate}
    ...
  >
    ...
  </Formik>
);

Usage​

Usage