We are going to add validation rules to the Form component so that they can be consumed like in the following example with a validationRules prop:

<Form
  validationRules={{
    title: [{ validator: required }, { validator: minLength, arg: 10 
    }],
    content: [{ validator: required }, { validator: minLength, arg: 
    50 }],
  }}
  ...
>
  ...
</Form>

The validationRules prop will allow consumers to define an array of validation rules for each field in the form. A validation rule references a function that will do the necessary check on the value in the field. We will refer to these functions as validators.

We'll carry out the following steps to implement the validationRules prop in the Form component:

1. Let's start by creating a type for a validator just beneath FormContext in Form.tsx:

type Validator = (value: any, args?: any) => string;

This is a TypeScript type alias.

When we create our validators, we can use a Validator type annotation rather than the more lengthy (fieldName: string, values: Values, args?: any) => string.

So, a validator will be a function that takes in the field value as well as an optional additional parameter. The validator will return an error message if the check fails and an empty string if it passes.

2. Let's create our first validator now for checking that a field is populated:

export const required: Validator = (value: any): string =>
  value === undefined || value === null || value === ''
    ? 'This must be populated'
    : '';

We use a JavaScript ternary to check whether the value is populated and return the error message if it isn't.

3. Let's create another validator that checks whether the number of characters is a value is beyond a certain amount:

export const minLength: Validator = (
  value: any,
  length: number,
): string =>
  value && value.length < length
    ? `This must be at least ${length} characters`
    : '';

Notice that we use the optional parameter for the minimum number of characters. 

4. Let's now add a prop to allow validation rules to be defined on the form:

interface Validation {
  validator: Validator;
  arg?: any;
}

interface ValidationProp {
  [key: string]: Validation | Validation[];
}

interface Props {
  submitCaption?: string;
  validationRules?: ValidationProp;
}

So, we can specify a single rule or an array of rules. A rule references a validator function and an optional argument to be passed into it.

5. Let's destructure the validationRules prop in the component function parameter:

export const Form: FC<Props> = ({
  submitCaption,
  children,
  validationRules
}) => { ... }

That's the validationRules prop complete.

Next, we'll track the validation error messages in preparation for rendering them on the page.