In the ever-evolving landscape of web development, one constant challenge that developers grapple with is the validation of data. Whether it's user inputs in a form, data retrieved from external sources, or configurations within an application, ensuring the integrity of data is paramount. In the pursuit of robust and error-free applications, developers seek tools that not only simplify the validation process but also offer flexibility and reliability.

This is where Zod steps into the spotlight.

Zod simplifies data validation for TypeScript developers, offering an easy way to define and validate different data types. It's not just for complex objects; whether it's a simple string or a nested structure, Zod has you covered. And the best part? JavaScript developers can hop on board too, making data validation a breeze for all.

Installation and Usage

Adding Zod to your project is a breeze, thanks to its compatibility with popular package managers. Simply run one of the following commands in your project directory:

Using npm:

npm install zod       # npm

Using yarn:

yarn add zod    #yarn

This will fetch and install the latest version of Zod, making it ready for use in your front-end application.

Basic Usage with Syntax:

In the pre-Zod era, data validation on the server side often involved writing custom validation logic or using various libraries. Let's consider an example where we want to validate user registration data in a Node.js/Express.js application without the aid of Zod.

Without Zod

// User registration route without Zod
app.post('/register', (req, res) => {
  const { username, email, password } = req.body;

  // Custom validation logic
  if (!username || !email || !password) {
    return res.status(400).json({ error: 'Missing required fields.' });
  }

  // Validate email format using a regular expression
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    return res.status(400).json({ error: 'Invalid email format.' });
  }

  // Additional validation rules...

  // If all validations pass, proceed with registration
  // ...

  res.status(200).json({ message: 'Registration successful!' });
});

The presence of numerous data checks using if-else statements not only renders the code suboptimal but also contributes to a cluttered and unmanageable appearance.

With Zod

const express = require('express');
const { z } = require('zod');

const app = express();
app.use(express.json());

// Zod schema for user registration
const registrationSchema = z.object({
  username: z.string().min(3).max(20),
  email: z.string().email(),
  password: z.string().min(6),
});

// User registration route with Zod
app.post('/register', (req, res) => {
  const formData = req.body;

  try {
    // Use Zod to validate the incoming data
    const validatedData = registrationSchema.parse(formData);

    // Process the validated data (e.g., store it in a database)
    // ...

    res.status(200).json({ message: 'Registration successful!' });
  } catch (error) {
    // Zod automatically generates detailed error messages
    const errorMessages = error.errors.map((err) => err.message).join(', ');
    res.status(400).json({ error: `Validation error: ${errorMessages}` });
  }
});

// Start the Express server
const PORT=3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

So as you can see the code looks very clean and easy to read.

Let's systematically break down the process of integrating Zod into our application:

1. Import the Zod Library:

Begin by importing the Zod library into your project. This involves including the necessary modules or functions from the Zod library that you intend to use.

2. Create a Schema:

Define a schema using Zod to represent the expected structure and validation rules for the data. This involves specifying the data types, constraints, and any other validation criteria.

3. Parse the Data:

Utilize Zod's parsing capabilities to validate and extract meaningful data from the input. The parsing process involves applying the defined schema to the incoming data, ensuring it adheres to the specified rules.

4. Handle the Error:

In the event of validation errors, implement error-handling mechanisms. Zod automatically generates detailed error messages, providing insights into the specific issues encountered during validation. This step involves capturing and appropriately managing these errors.

By following these steps, you can seamlessly integrate Zod into your application, facilitating robust data validation with clear and concise code. Let's explore each step in more detail:

Step 1: Import the Zod Library:

const { z } = require('zod');

Here, we import the necessary functionality (z) from the Zod library.

Step 2: Create a Schema:

// Example Zod schema for a user object
const userSchema = z.object({
  username: z.string().min(3).max(20),
  email: z.string().email(),
  age: z.number().int().positive(),
});

In this example, we define a schema (userSchema) using Zod for a user object with specific validation rules.To understand more about the syntax I will urge you to go through the documentation once.

Step 3: Parse the Data:

const userData = {
  username: 'john_doe',
  email: 'john@example.com',
  age: 25,
};

try {
  const validatedUser = userSchema.parse(userData);
  console.log('Parsed User Data:', validatedUser);
} catch (error) {
  console.error('Validation Error:', error.errors);
}

We attempt to parse the provided userData using the defined userSchema. If successful, the parsed data is logged; otherwise, validation errors are captured.

Step 4: Handle the Error:

try {
  // Attempt to parse data
  const validatedUser = userSchema.parse(userData);
  console.log('Parsed User Data:', validatedUser);
} catch (error) {
  // Handle validation errors
  console.error('Validation Error:', error.errors);
  // Additional error handling logic can be implemented here
}

Here, we handle validation errors by logging the detailed error messages generated by Zod. You can customize this error-handling logic based on your application's requirements.

Zod Primitives

String:
- Define and validate string data. You can specify constraints such as minimum and maximum length, regex patterns, and more.

    const stringSchema = z.string().min(3).max(20);
    //Few More Primitives
    z.string().length(5);
    z.string().email();//Checks whether the string is email or not.
    z.string().url(); //Checks whether the string is correct url or not.
    z.string().emoji();
    z.string().uuid();
    z.string().cuid();
    z.string().cuid2();
    z.string().ulid();
    z.string().regex(regex); //Checks whether the given string follows regex.
    z.string().includes(string); //Checks the input string includes given string
    z.string().startsWith(string);
    z.string().endsWith(string);

Number:
- Define and validate numeric data, including integers and floats. You can set constraints like minimum and maximum values.

    const numberSchema = z.number().int().min(0);

Boolean:
- Define and validate boolean values.

    const booleanSchema = z.boolean();

Array:
- Define and validate arrays. You can specify the schema for the elements within the array.

    const arraySchema = z.array(z.string());

Object:

Define and validate objects with specific properties and their corresponding schemas.

  const personSchema = z.object({
    name: z.string(),
    age: z.number(),
  });

Literal:
- Define and validate literal values. This is useful for enforcing specific constant values.

    const statusSchema = z.literal('active');

Enum:
- Define and validate values from a predefined set.

    const colorSchema = z.enum(['red', 'green', 'blue']);

Optional:
- Wrap a schema to indicate that the data can be optional.
- ```
  const optionalStringSchema = z.string().optional();
```

Nullable:

Wrap a schema to indicate that the data can be either the specified type or null.

  const nullableStringSchema = z.string().nullable();
  // empty types
  z.undefined();
  z.null();
  z.void(); // accepts undefined

  // catch-all types
  // allows any value
  z.any();
  z.unknown();

  // never type
  // allows no values 
  z.never();

Union:
- Combine multiple schemas to allow data that matches any of the specified types.

    const stringOrNumberSchema = z.string().or(z.number());

Intersection:
- Combine multiple schemas to require data that matches all of the specified types.

    const personWithAddressSchema = z.object({
      ...personSchema.shape,
      address: z.string(),
    });

Custom Validations

Custom validations in Zod are achieved using the refine method, allowing developers to define their validation logic beyond the basic schema constraints. This enables the creation of intricate and application-specific validation rules. Here's an overview and examples of custom validations using Zod:

Basic Syntax:

z.refine(value => booleanCondition, refinementOptions)

value: A function that takes the data being validated and returns a boolean indicating whether the data is valid according to the custom condition.
booleanCondition: The custom condition that the data must satisfy. If this condition is false, the data is considered invalid.
refinementOptions: An optional object that can include properties like path, message, and params to customize the error message and behavior.

Example 1: Custom Length Validation

const customLengthValidator = (value) => value.length === 8;

const customLengthSchema = z.string().refine(customLengthValidator, {
  message: 'Value must have exactly 8 characters',
});

In this example, customLengthValidator checks if the string has exactly 8 characters. If not, a validation error with a custom message is triggered.

Example 2: Asynchronous Custom Validation

const isUsernameAvailable = async (username) => {
  // Simulate an asynchronous check, e.g., querying a database
  const isAvailable = await checkAvailability(username);
  return isAvailable;
};

const usernameSchema = z.string().refine(async (username) => {
  return await isUsernameAvailable(username);
}, { message: 'Username is not available' });

Here, the isUsernameAvailable function simulates an asynchronous check (e.g., querying a database) to determine if a username is available. The custom validation ensures that the username is available asynchronously.

Example 3: Complex Object Validation

javascriptCopy codeconst complexObjectSchema = z.object({
  value1: z.string(),
  value2: z.number(),
}).refine((data) => {
  // Custom condition involving multiple properties
  return data.value1.length === data.value2.toString().length;
}, { message: 'Length of value1 must equal length of value2 as strings' });

In this example, the custom validation checks whether the length of value1 is equal to the length of value2 when both are converted to strings.

Thank you for taking the time to explore the intricacies of Zod validation with us. We hope this journey through the world of schema declaration and validation in TypeScript has been enlightening and practical for your projects.

Follow me on Twitter for updates, discussions, and a regular dose of insightful content. We look forward to connecting with you and sharing more on the exciting developments in the ever-evolving landscape of web development.

Happy coding! 🚀✨

Vishal Sharma's Blog