Client Side Form Validation

Welcome back! So far, you have learned how to fetch and display a user’s reading shelf, update progress optimistically, and edit shelf status. Now, let’s focus on making your forms more reliable and user-friendly by adding client-side validation.

Client-side validation helps catch mistakes before data is sent to the server. This means users get instant feedback if they enter something wrong, like leaving a field empty or typing a page number that’s too high. In this lesson, you will learn how to use two popular libraries — Zod and React Hook Form — to add strong, easy-to-understand validation to your forms.

By the end of this lesson, you will know how to:

• Define validation rules for your forms using Zod.
• Connect those rules to your forms with React Hook Form.
• Show clear error messages to users when something is wrong.

Let’s get started!

The central tool in React Hook Form is the useForm hook. It sets up your form state and provides several helper functions:

• register: connects each input field to the form state. It simplifies form validation by allowing you to define validation rules directly within the register call, based on HTML standard validation attributes (e.g., required, minLength, maxLength, pattern).
• handleSubmit: wraps your submit handler so it only runs if validation passes.
• formState.errors: stores validation errors for each field.
• reset, setError, and others provide utilities for resetting values or adding custom errors.

Here’s the simplest possible usage:

// basic usage of useForm
import { useForm } from "react-hook-form";

export default function SimpleForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register("username")} placeholder="Username" />
      {errors.username && <p>{errors.username.message}</p>}
      <button>Submit</button>
    </form>
  );
}

In this snippet:

• register("username") wires the input into the form’s state system.
• handleSubmit ensures your onSubmit handler runs with validated data.
• If validation fails, the error message for username will appear.

This pattern keeps form code declarative and reduces boilerplate compared to manually managing useState for each input.