Zod Validation in [React + Typescript]

-
Zod

Zod is a TypeScript-first schema declaration and validation library. It allows you to define validation schemas for data structures, such as objects, strings, numbers, arrays, etc. Zod validates the data according to the schema and provides clear error messages if the data doesn't match the expected structure.

Basically it helps us to define a schema for a data structure and then validate that data structure values against the schema and give us proper error.

Key Features of Zod:

  1. Type-safe: Zod integrates seamlessly with TypeScript, ensuring that the types of data are validated correctly and that type inference works as expected.
  2. Declarative Validation: You define a schema that describes the expected structure of the data, and Zod will automatically validate the data against that schema.
  3. Error Handling: Zod provides detailed, easy-to-understand error messages when validation fails, making it simple to debug validation issues.
  4. Composability: You can combine Zod schemas to create more complex data structures, making it easy to reuse and compose validation logic.
  5. Asynchronous Validation: Zod supports asynchronous validation for scenarios such as checking if a value exists in a database.
Okay, Let's move to the coding part, best practice with zod validation library.
For me it is to create a custom hook and then use it everywhere according to my need, you can explore your best choice and let me know more in comments so I can learn new ways too.

Now move to the code, so here we are going to create a custom hook named useFormValidation which will return us an object containing three fields 
  1. errors: This will contains an objects with key of form data and error associated with as value.
  2. validateField: It is a function which will validate a particular field of a form. It takes two params- first one is name of field which we want to validate and the other one is the value of that field.
  3. validateForm: It is also a function which will validate the whole form in one go. It takes only one param that is form data in the object form.
Okay now its time to create our custom hook as we explained above. First we are going to install zod in our react + typescript project using command


npm install zod

After installing the zod we will create a file name form-validation.tsx and put this code there

import { useState } from "react";
import { z, ZodSchema } from "zod";

type UseZodValidationProps<T> = {
  schema: ZodSchema<T>;
};

export const useZodValidation = <T extends Record<string, any>>({
  schema,
}: UseZodValidationProps<T>) => {
  const [errors, setErrors] = useState<Record<string, string>>({});

  // Validate a single field dynamically as the user types
  const validateField = (fieldName: keyof T, value: any) => {
    const result = schema.safeParse({ [fieldName]: value });

    if (!result.success) {
      const error = result.error.format()[fieldName]?._errors?.[0] || "";
      setErrors((prevErrors) => ({ ...prevErrors, [fieldName]: error }));
    } else {
      setErrors((prevErrors) => {
        const { [fieldName]: _, ...rest } = prevErrors;
        return rest;
      });
    }
  };

  // Validate the entire form using the provided form data
  const validateForm = (data: T) => {
    const result = schema.safeParse(data);

    if (!result.success) {
      const formattedErrors = result.error.format();
      const errors = Object.keys(data).reduce((acc, key) => {
        if (formattedErrors[key]) {
          acc[key] = formattedErrors[key]._errors[0];
        }
        return acc;
      }, {} as Record<string, string>);

      setErrors(errors);
      return false;
    }

    setErrors({});
    return true;
  };

  return { errors, validateField, validateForm };
};


Let's explain each part 

Code Explanation

1. Type Definition (UseZodValidationProps)

type UseZodValidationProps<T> = {
  schema: ZodSchema<T>;
};
  • This type defines the shape of the props that the useZodValidation hook will receive. The hook expects a schema prop, which is a ZodSchema (a validation schema from the Zod library). The T represents a generic type for form data (the schema type).

2. State for Errors (useState)

const [errors, setErrors] = useState<Record<string, string>>({});
  • errors is a state variable that will store validation errors for each field. It's an object where each key is a field name, and the value is the corresponding error message.
  • setErrors is used to update this state.

3. validateField Function

const validateField = (fieldName: keyof T, value: any) => {
  const result = schema.safeParse({ [fieldName]: value });

  if (!result.success) {
    const error = result.error.format()[fieldName]?._errors?.[0] || "";
    setErrors((prevErrors) => ({ ...prevErrors, [fieldName]: error }));
  } else {
    setErrors((prevErrors) => {
      const { [fieldName]: _, ...rest } = prevErrors;
      return rest;
    });
  }
};
  • validateField is called when you want to validate a single field dynamically (e.g., on each input change).
  • Parameters:
    • fieldName: The name of the field to validate (e.g., "email").
    • value: The current value of the field (e.g., the input value).
  • Inside the function:
    • safeParse({ [fieldName]: value }): This uses Zod's safeParse method to validate the specific field (fieldName) against the schema. The schema is designed to validate the entire object, so we pass a partial object with just the field we're validating.
    • If validation fails (!result.success), we extract the error message from the result and update the errors state with the field's error message.
    • If the field is valid, we remove any previous error for that field from the errors state.

4. validateForm Function

const validateForm = (data: T) => {
  const result = schema.safeParse(data);

  if (!result.success) {
    const formattedErrors = result.error.format();
    const errors = Object.keys(data).reduce((acc, key) => {
      if (formattedErrors[key]) {
        acc[key] = formattedErrors[key]._errors[0];
      }
      return acc;
    }, {} as Record<string, string>);

    setErrors(errors);
    return false;
  }

  setErrors({});
  return true;
};
  • validateForm is used to validate the entire form (all fields) at once.
  • Parameters:
    • data: The form data (an object) that needs to be validated against the schema.
  • Inside the function:
    • safeParse(data): This validates the entire form data.
    • If validation fails, it formats the error and creates an errors object containing error messages for each invalid field. The setErrors function is then called to update the state with these errors.
    • If validation passes, it clears any previous errors by setting setErrors({}) and returns true to indicate success.

5. Return Object

return { errors, validateField, validateForm };
  • The hook returns the following:
    • errors: The current errors object containing validation error messages for the form fields.
    • validateField: A function to validate a single field in real-time (for example, when the user types in a field).
    • validateForm: A function to validate the entire form (for example, when submitting the form).

How This Works in a Component

  • You can use this hook in your form components to manage field validation.
  • validateField is used for validating individual fields in real-time (e.g., when a user types in a field).
  • validateForm is used when submitting the form, to ensure that all fields are validated at once.
Let's see an example to use this hook in a form

Example Usage in a Component

import React, { useState } from "react";
import { useZodValidation } from "./useZodValidation";
import { z } from "zod";

// Define a validation schema using Zod
const schema = z.object({
  name: z.string().min(3, "Name must be at least 3 characters"),
  email: z.string().email("Invalid email address"),
  age: z.preprocess((val) => Number(val), z.number().min(18, "Must be at least 18")),
});

const MyForm = () => {
  const { errors, validateField, validateForm } = useZodValidation({ schema });

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    age: 18,
  });

  const onChangeHandler = (field: keyof typeof formData, value: any) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    validateField(field, value); // Real-time field validation
  };

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Validate the entire form using formData
    if (validateForm(formData)) {
      console.log("Form Data:", formData);
    }
  };

  return (
    <form onSubmit={onSubmit} className="space-y-4 p-4 border rounded-md w-80">
      <div>
        <label>Name:</label>
        <input
          value={formData.name}
          onChange={(e) => onChangeHandler("name", e.target.value)}
          className="border p-1 rounded w-full"
        />
        {errors.name && <p className="text-red-500">{errors.name}</p>}
      </div>

      <div>
        <label>Email:</label>
        <input
          value={formData.email}
          onChange={(e) => onChangeHandler("email", e.target.value)}
          className="border p-1 rounded w-full"
        />
        {errors.email && <p className="text-red-500">{errors.email}</p>}
      </div>

      <div>
        <label>Age:</label>
        <input
          type="number"
          value={formData.age}
          onChange={(e) => onChangeHandler("age", e.target.value)}
          className="border p-1 rounded w-full"
        />
        {errors.age && <p className="text-red-500">{errors.age}</p>}
      </div>

      <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
        Submit
      </button>
    </form>
  );
};

export default MyForm;

Comments

Post a Comment

Popular posts from this blog

Music app using react

-
Image
Music app using react Description This is a simple music app which uses howler npm package to play local music kept in public directory. React hooks used: useEffect: useEffect is a hook that allows you to perform side effects in functional components. Side effects can include data fetching, subscriptions, or manually changing the DOM. useState: In React, useState is a hook that allows functional components to have state. Before the introduction of hooks, state was only available in class components. useState enables functional components to have local state without needing to convert them to class components. useMemo: In React, useMemo is a hook that memoizes the result of a function so that the function is not re-executed on every render unless its dependencies change. This can help optimize performance by preventing unnecessary calculations or expensive operations. useRef: In React, the useRef hook is use...
Read more

Build a Secretkeeper app and generate QR code for your message

-
Image
Build a Secretkeeper app and generate QR code for your message Summary: Secretkeeper app let you generate a QR code for your text message which you can share and download and when you scan that QR code with scanner you will get the text message. It is a React+Vite+Typescript app which uses  react-qr-code  package for generating QR code. Prerequisites # Basic knowledge of React.js Basic Typescript    Tailwind css   To create vite application with react template follow these commands: Terminal $npx create-vite secretkeeper After that choose React template and then choose typescript and press enter. Now move to secretkeeper directory in terminal or open that folder in terminal directly. Terminal $cd secretkeeper Setup tailwind css...
Read more

Building A Simple AI Chatbot With Web Speech API And Node.js

-
Image
Building A Simple AI Chatbot With Web Speech API And Node.js Summary: The app will listen to the user’s voice and reply with a synthetic voice. Because the Web Speech API is still experimental, the app works only in supported browsers. Browser compatibility of web speech API: To build the web app, we’re going to take three major steps: Use the web speech API's speech recogination to listen to user's voice Send the user’s message to a commercial natural-language-processing API as a text string. Once API.AI returns the response text back, use the SpeechSynthesis interface to give it a synthetic voice PREREQUISITES # Basic knowledge of Node.js and javascript. We are going to use node.js for serverside programming. Socket.Io basics. Setting Up Your Node.Js Application # index.js openai.js public css style.css ...
Read more