next-safe-actionplayground
Overview
  • Home
Core
  • Core Actions
  • Validation Errors
  • Middleware
Hooks
  • React Hooks
  • Optimistic Updates
Forms
  • Form Integration
  • React Hook Form
Framework
  • Navigation & Framework
  • GitHub

Validation Errors

Different validation error shapes, nested schemas, and custom error handling.

Formatted Errors (default)
Default validation error shape with nested _errors arrays.
Result:
—
Flattened Errors
Using flattenValidationErrors to get formErrors + fieldErrors shape.
Result:
—
Nested Schema
Complex nested Zod schema with superRefine producing random validation errors at different levels.
Result:
—
returnValidationErrors
Manually returning validation errors from server action code (use the formatted errors example above — try username 'johndoe').

The formatted and flattened examples above both use returnValidationErrors to manually set field-level errors from the server. Try username "johndoe" to see a user_suspended error, or any other value to see incorrect_credentials.

throwValidationErrors
Client created with throwValidationErrors: true — validation errors throw instead of returning.
Result:
—
Custom Error Shape
Using handleValidationErrorsShape to transform validation errors into a custom format.
Result:
—