How can I validate forms using React Hook Form?

How can I validate forms using React Hook Form?

You can validate forms in React Hook Form by using the register function with validation rules. For example, you can specify required fields, min/max length, and custom validation functions.

Can you show me an example of a required field validation?

Sure! Here's a simple example:

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

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

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input {...register('username', { required: true })} />
    {errors.username && <span>This field is required</span>}
    <input type="submit" />
  </form>
);

What about custom validation?

For custom validation, you can use the validate option in the register function. Here's an example:

<input {...register('age', { validate: value => value > 18 || 'You must be at least 18 years old' })} />
{errors.age && <span>{errors.age.message}</span>}