next-safe-actionplayground
Overview
  • Home
Core
  • Core Actions
  • Validation Errors
  • Middleware
Hooks
  • React Hooks
  • Optimistic Updates
  • Coordinating Mutations
  • Pending Changes
Integrations
  • Form Integration
  • React Hook Form
  • TanStack Query
Framework
  • Navigation & Framework
  • Offline Support
  • 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:
-