When validating form data with Zod in a React application, it's important not only to detect invalid input but also to clearly communicate validation errors to users. Zod's safeParse method returns detailed error information when validation fails, allowing you to extract and display meaningful messages in the user interface.

If validation is unsuccessful, the error object provided by Zod contains information about which fields failed validation and why. A common and practical approach for React forms is to use result.error.flatten().fieldErrors. This method returns an object where each key corresponds to a form field name, and the value is an array of error messages for that field. This structure makes it easy to associate each validation error with the correct input.

Once error messages are extracted, they should be displayed near the relevant form fields. Showing errors directly next to the inputs helps users immediately understand what needs to be corrected and reduces confusion.