Validation Rules and Error Messages
Apply built-in validation rules like required, minLength, and pattern in the rules prop, and render the error object beneath each field.
Built-In Validation Rules Overview
react-hook-form provides several built-in validation rules that cover the most common requirements without writing custom code. They are: required, minLength, maxLength, min (for numeric minimum), max (for numeric maximum), and pattern (regex match). Each rule can take a simple value or an object with value and message for a custom error message.
required Rule
The required rule ensures a field is not left empty. You can pass a boolean true (which uses a generic error message) or a string (which becomes the error message). For required fields in mobile forms, always pass a descriptive message so users immediately know what is missing without guessing.
// Simple boolean — uses generic message
rules={{ required: true }}
// String shorthand — message is the string
rules={{ required: 'Please enter your email' }}
// Full object form
rules={{ required: { value: true, message: 'Email is required' } }}All lessons in this course
- Setting Up react-hook-form with Controller
- Validation Rules and Error Messages
- Multi-Step Forms with Form State
- Submitting and Resetting Forms