Zod Messages

Zod Messages is a TypeScript project that provides a set of utilities for handling validation messages using the Zod library. This library allows you to easily validate your data and display error messages in a readable form within your components.

Features

• Easy Integration: Seamlessly integrates with the Zod validation library.
• Readable Messages: Transforms Zod error results into user-friendly validation messages.
• TypeScript Support: Fully typed and compatible with TypeScript.
• Flexible: Can be used in various JavaScript frameworks and environments.

⚠️ React Dependency useValidator uses React hooks under the hood. Make sure react is installed as a dependency in your project:

Installation

Use the package manager npm to install Zod Messages.

1npm install zod-messages

Usage with hooks

1import { useValidator } from 'zod-messages';
2
3// your code here

Simple Example useValidator

1// model.ts
2export interface User {
3  name: string;
4  email: string;
5  age: number;
6  address : {
7    street: string;
8    city: string;
9  }
10}

1// schema.ts
2import { z } from 'zod';
3
4
5export const UserValidationSchema = z.object({
6    name: z.string().min(3),
7    email: z.string().email({ message: 'Invalid email address' }),
8    age: z.number().min(15, { message: 'Age must be at least 15' }),
9    address: addressSchema,
10});
11
12export const AddressValidationSchema = z.object({
13    street: z.string().min(3),
14    city: z.string().min(3),
15});

1// index.tsx
2
3import { useValidator } from 'zod-messages';
4import { ErrorMessage } from '@your-components/errorMessage/index';
5
6export const YourComponent = () => {
7
8    const { validate, validationMessages } = useValidator<User>(UserValidationSchema);
9
10    const handleSubmit = (data: User) => {
11        const result = validate(data);
12        if (result.success) {
13            // do something
14        }
15    }
16    
17    return (
18        <form onSubmit={handleSubmit}>
19            <input type="text" name="name" />
20            <ErrorMessage message={validationMessages.name} />
21            
22            <input type="text" name="email" />
23            <ErrorMessage message={validationMessages.email} />
24
25            <input type="number" name="age" />
26            <ErrorMessage message={validationMessages.age} /> //Age must be at least 15
27            
28            <input type="text" name="address.street" />
29            <ErrorMessage message={validationMessages.address.street} />
30            
31            <input type="text" name="address.city" />
32            <ErrorMessage message={validationMessages.address.city} />
33            
34            <button type="submit">Submit</button>
35        </form>
36    );
37}

Example for use formatErrorMessages

1//validation.ts
2
3import { ValidationResult } from "./useValidator";
4
5export const isUserValid = <T extends User>(data?: T): ValidationResult<T> => {
6    const result = UserValidationSchema.safeParse(data ?? initUserData);
7
8    return {
9        isInvalid: !result.success,
10        validationMessages: result.success ? {} : formatErrorMessages<T>(result.error),
11    }
12};
13
14//result
15// {
16//     isInvalid: false,
17//     validationMessages: {
18//         name: 'Name is required',
19//         email: 'Invalid email address',
20//         age: 'Age must be at least 15',
21//         address: {
22//             street: 'Street is required',
23//             city: undefined
24//         }
25//     }
26// }
27

Advanced example - use custom error messages

1import { z } from 'zod';
2
3
4export const UserValidationSchema = z.object({
5    name: z.string().min(3),
6    email: z.string().email({ message: 'Invalid email address' }),
7    address: addressSchema,
8})
9    .superRefine((data, ctx) => {
10    if (data.address.city === 'New York') {
11        return ctx.addIssue({
12            code: z.ZodIssueCode.custom,
13            path: ['address', 'city'],
14            message: 'City cannot be New York',
15        });
16    }
17})

or for use global error message

1import {z} from 'zod';
2import {eGlobalErrorMessage} from "./useValidator";
3
4
5export const UserValidationSchema = z.object({
6    name: z.string().min(3),
7    email: z.string().email({message: 'Invalid email address'}),
8})
9    .superRefine((data, ctx) => {
10    const diacritics = /[\u0300-\u036f]/g;
11    
12    if (diacritics.test(data.name)) {
13        return ctx.addIssue({
14            code: z.ZodIssueCode.custom,
15            path: [eGlobalErrorMessage.globalErrorMessage],
16            message: 'Name cannot contain diacritics',
17        });
18    }
19})

1// index.tsx
2//...
3return (
4    <form onSubmit={handleSubmit}>
5        <input type="text" name="name" />
6        <ErrorMessage message={validationMessages.name ?? validationMessages.globalErrorMessage} />
7    </form>);
8//...

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

This project is licensed under the ISC License - see the LICENSE file for details.