When you want to ensure that your React form data is valid before processing or submitting it, you can use a Zod schema. A Zod schema acts as a blueprint that describes exactly what valid data should look like. To validate form data, you typically define a schema that matches the shape and requirements of your form fields, then use that schema to check the user's input when they submit the form.

Suppose you have a form with two fields: name and email. You might define a Zod schema like this:

import { z } from "zod";

const formSchema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email address")
});

When the user submits the form, you gather the form data into an object and pass it to the schema's safeParse method. This method checks if the data matches the schema and returns a result that tells you whether validation succeeded or failed.

Handling the result of Zod validation is straightforward. The safeParse method returns an object with a success property. If success is true, the form data matches the schema and you can proceed with submitting or processing it. If success is false, Zod provides detailed error information, which you can use to update your form state and display validation messages to the user.

Example of Handling Form Submission and Validation

function handleSubmit(formData) {
  const result = formSchema.safeParse(formData);
  if (result.success) {
    // The form data is valid; proceed with submission
    // e.g., send to server or update state
  } else {
    // The form data is invalid; extract and display errors
    // e.g., set error state for fields
    const errors = result.error.format();
    // Update your form to show validation messages
  }
}

By handling the validation result in this way, you ensure that only valid data is processed, and users receive clear feedback about what needs to be corrected before they can successfully submit the form.