How can I implement custom validation in React Hook Form?

How can I implement custom validation in React Hook Form?

You can implement custom validation in React Hook Form by using the validate option in the register method.

Can you show me a code example for that?

Sure! Here's a simple example:

import { useForm } from 'react-hook-form';

const MyForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username', { required: true, validate: value => value.length > 3 || 'Username must be longer than 3 characters' })} />
      {errors.username && <p>{errors.username.message}</p>}
      <input type="submit" />
    </form>
  );
};

This code validates that the username is required and must be longer than 3 characters.

What if I want to add multiple validation rules?

You can add multiple validation rules by chaining them in the validate function. For example:

<input {...register('username', { 
  required: 'Username is required', 
  validate: { 
    minLength: value => value.length >= 3 || 'Must be at least 3 characters', 
    maxLength: value => value.length <= 15 || 'Must be at most 15 characters' 
  } 
})} />