Challenge: Form and validation

Write a react-hook-form registration form validated with Zod.

Challenge: Form and validation

In this challenge you will write a login form with react-hook-form. The useForm hook gives register and handleSubmit.

For validation you write register('email', { required: true }). Errors land in formState.errors. You capture a valid form with handleSubmit(onSubmit). To show the error to the user you print errors.email.

Exercise Write the LoginForm component

Write LoginForm. Get register and handleSubmit from useForm. Inside <form onSubmit={handleSubmit((data) => console.log(data))}> place <input {...register('email', { required: true })} /> and <button type="submit">Send</button>. Export it.

Show example solution

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

function LoginForm() {
  const { register, handleSubmit } = useForm();
  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('email', { required: true })} />
      <button type="submit">Send</button>
    </form>
  );
}
export default LoginForm;

Test yourself

Where are errors collected in react-hook-form?
- useState.errors
- register.errors
- formState.errors
- errors state
Show answer

formState.errors — formState.errors carries the errors.

Fill in the blank: make a field required

<input {...register('email', { ____: true })} />

Show answer

<input {...register('email', { required: true })} />

Next lesson: Challenge: Accessible modal

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies