React Academy · Lesson

Validation Rules & Error Messages

Apply built-in validation rules (required, minLength, pattern) and display error messages.

Validation Rules & Error Messages is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will add built-in validation rules to React Hook Form fields and display user-friendly error messages below each input.

Built-in Validation Rules

Pass a rules object as the second argument to register(). Built-in rules include: `required`, `minLength`, `maxLength`, `min`, `max`, `pattern`, and `validate`.

<input
  {...register('email', {
    required: 'Email is required',
    pattern: {
      value: /^[^@]+@[^@]+\.[^@]+$/,
      message: 'Invalid email address',
    },
  })}
/>

Required Fields

Set `required` to a string to make the field required. The string becomes the error message. Setting it to `true` uses a generic message.

register('name', { required: 'Name is required' })
// or
register('name', { required: true })

Length Constraints

Use `minLength` and `maxLength` with a `{ value, message }` object to set character limits and custom error messages.

register('username', {
  minLength: { value: 3, message: 'At least 3 characters' },
  maxLength: { value: 20, message: 'At most 20 characters' },
})

Pattern Validation

The `pattern` rule accepts a RegExp value. Use it to validate email formats, phone numbers, or any string pattern.

register('phone', {
  pattern: {
    value: /^[0-9]{10,11}$/,
    message: 'Enter a valid phone number',
  },
})

Displaying Errors

Read the `errors` object from formState. Each field that failed validation has an entry with a `message` property. Render it below the input conditionally.

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

<input {...register('email', { required: 'Required' })} />
{errors.email && <p className="error">{errors.email.message}</p>}

Custom Validation with validate

The `validate` rule accepts a function that returns `true` for valid or an error string for invalid. Use it for business logic that built-in rules cannot express.

register('age', {
  validate: value =>
    parseInt(value) >= 18 || 'You must be at least 18',
})

Multiple Custom Validators

Pass an object of named validators to `validate` to run multiple custom checks on the same field.

register('password', {
  validate: {
    hasUpper: v => /[A-Z]/.test(v) || 'Needs uppercase',
    hasDigit: v => /[0-9]/.test(v) || 'Needs a number',
  }
})

Showing Error Count

Count total errors to enable/disable the submit button or show a summary. Use Object.keys(errors).length.

const hasErrors = Object.keys(errors).length > 0;
<button type="submit" disabled={hasErrors}>Submit</button>

Styling Error Inputs

Apply a CSS class to inputs that have errors for a visual red border effect. Check errors[fieldName] to apply the class conditionally.

<input
  {...register('email', { required: true })}
  className={errors.email ? 'input-error' : ''}
/>

Quick Check

How do you display the error message for a field named 'email' in React Hook Form?

Recap

Add validation rules as the second argument to register(): required, minLength, maxLength, pattern, min, max, and validate. Read errors[fieldName].message from formState to display messages.

Up Next

Next lesson: **Schema Validation with Zod** — you will integrate @hookform/resolvers and Zod schemas for type-safe form validation.

Frequently asked questions

Is the “Validation Rules & Error Messages” lesson free?

Yes — the full text of “Validation Rules & Error Messages” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Validation Rules & Error Messages”?

Apply built-in validation rules (required, minLength, pattern) and display error messages. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Validation Rules & Error Messages” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy