DEV Community: Guilherme Cheng

Validating forms in React Apps with Zod

Guilherme Cheng — Thu, 30 Nov 2023 23:06:23 +0000

After a lot of attempts, and experimenting different versions of it, I’ve come with what I'd say is the best way to validate forms. In this post I'll try to explain, step by step, how I do it. I hope this helps you in any way, as others helped me with their posts here.

So, let's go!

Starting setup

Lets start with a simple form, with some of the most requested data.



// component Form
export function Form() {
  return (
    <form className="form">
      <label htmlFor="">Name</label>
      <input type="text" />

      <label htmlFor="">Email</label>
      <input type="email" />

      <label htmlFor="">Password</label>
      <input type="Password" />

      <label htmlFor="">Number</label>
      <input type="number" />

            <button type="submit" className="button">
        Enviar
      </button>
    </form>
  );
}

// main page
import './App.css';
import { Form } from './components/Form';

function App() {
  return (
    <div className="container">
      <Form />
    </div>
  );
}

export default App;

Installing React Hook Form

$ npm install react-hook-form

Installing Zod

$ npm install zod

Adapting Form component to React Hook Form

To use React Hook Form, we will adequate our form according to the basic example usage, from the documentation:

import register, handleSubmit and errors from useForm
register must be inserted on every input, with its respective name
call handleSubmit, from React Hook Form, at the 'onSubmit’ method of the form, receiving the ‘submitForm’, created by us. The submitForm function is where you will decide how to submit your data. In this example, we will only console the form data.
if the input is not validated at submit, an error will be presented at 'errors’, to the respective not validated input.



import { useForm } from 'react-hook-form';

interface Inputs {
  name: string;
  email: string;
  password: string;
  number: number;
}

export function Form() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Inputs>();

  function submitForm() {
    console.log('submit');
  }

  return (
    <form className="form" onSubmit={handleSubmit(submitForm)}>
      <label htmlFor="">Name</label>
      <input type="text" {...register('name')} />

      {errors?.name && 'erro'}

      <label htmlFor="">Email</label>
      <input type="email" {...register('email', { required: true })} />
      {errors?.email && 'erro'}

      <label htmlFor="">Password</label>
      <input type="Password" {...register('password')} />

      <label htmlFor="">Number</label>
      <input type="number" {...register('number')} />

      <button type="submit" className="button">
        Enviar
      </button>
    </form>
  );
}

Using Zod

Now, we will add Zod validation to the form. First, we need to install it, along with @hookform/resolvers, to correctly use Zod with React Hook Form:

Installing Zod



$ npm install zod
$ npm install @hookform/resolvers

Creating the validation Schema

Now, we will create an object schema, and infer its type:



import { z } from 'zod';
import { zodResolver } from "@hookform/resolvers/zod";

const validationSchema = z.object({
  name: z.string().min(1),
  email: z.string().min(1).email(),
  password: z.string().min(1),
  phone: z.string().min(1),
});

type SchemaProps = z.infer<typeof validationSchema>;

We also need to change our useForm, passing its resolver:



const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<SchemaProps>({
    resolver: zodResolver(validationSchema)
  });

Don't forget to put the error messages in the form!



// form should look something like this
<form className="form" onSubmit={handleSubmit(submitForm)}>
      <div>
        <label htmlFor="">Name</label>
        {errors?.name && <span>{errors.name.message}</span>}
      </div>
      <input type="text" {...register('name')} />

      <div>
        <label htmlFor="">Email</label>
        {errors?.email && <span>{errors.email.message}</span>}
      </div>
      <input type="email" {...register('email')} />

      <div>
        <label htmlFor="">Password</label>
        {errors?.password && <span>{errors.password.message}</span>}
      </div>
      <input type="Password" {...register('password')} />

      <div>
        <label htmlFor="">Phone Number</label>
        {errors?.phone && <span>{errors.phone.message}</span>}
      </div>
      <input type="string" {...register('phone')} />

      <button type="submit" className="button">
        Enviar
      </button>
    </form>

The form, with active errors, should look like this:

Customizing

Now, let's customize our validation. We will:

insert custom error messages to each validation, of each property
insert strong password validation (min 8 characters, one uppercase, one lowercase, one number and one special character)
insert phone number validation (brazilian phone number)



// phone validation (Brazil)
const phoneValidation = new RegExp(
  /^(?:(?:\+|00)?(55)\s?)?(?:\(?([1-9][0-9])\)?\s?)?(?:((?:9\d|[2-9])\d{3})\-?(\d{4}))$/
);

// Minimum 8 characters, at least one uppercase letter, one lowercase letter, one number and one special character
const passwordValidation = new RegExp(
  /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/
);

const validationSchema = z.object({
  name: z.string().min(1, { message: 'Must have at least 1 character' }),
  email: z
    .string()
    .min(1, { message: 'Must have at least 1 character' })
    .email({
      message: 'Must be a valid email',
    }),
  password: z
    .string()
    .min(1, { message: 'Must have at least 1 character' })
    .regex(passwordValidation, {
      message: 'Your password is not valid',
    }),
  phone: z
    .string()
    .min(1, { message: 'Must have at least 1 character' })
    .regex(phoneValidation, { message: 'invalid phone' }),
});

For phone and password validations, we use the .regex, calling our validation, and passing the error message.

To sum up, this is the entire code of the component:



import { z } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const phoneValidation = new RegExp(
  /^(?:(?:\+|00)?(55)\s?)?(?:\(?([1-9][0-9])\)?\s?)?(?:((?:9\d|[2-9])\d{3})\-?(\d{4}))$/
);

const passwordValidation = new RegExp(
  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
);

const validationSchema = z.object({
  name: z.string().min(1, { message: 'Must have at least 1 character' }),
  email: z
    .string()
    .min(1, { message: 'Must have at least 1 character' })
    .email({
      message: 'Must be a valid email',
    }),
  password: z
    .string()
    .min(1, { message: 'Must have at least 1 character' })
    .regex(passwordValidation, {
      message: 'Your password is not valid',
    }),
  phone: z
    .string()
    .min(1, { message: 'Must have at least 1 character' })
    .regex(phoneValidation, { message: 'invalid phone' }),
});

type SchemaProps = z.infer<typeof validationSchema>;

export function Form() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<SchemaProps>({
    resolver: zodResolver(validationSchema),
  });

  function submitForm() {
    console.log('submit');
  }

  return (
    <form className="form" onSubmit={handleSubmit(submitForm)}>
      <div>
        <label htmlFor="">Name</label>
        {errors?.name && <span>{errors.name.message}</span>}
      </div>
      <input type="text" {...register('name')} />

      <div>
        <label htmlFor="">Email</label>
        {errors?.email && <span>{errors.email.message}</span>}
      </div>
      <input type="email" {...register('email')} />

      <div>
        <label htmlFor="">Password</label>
        {errors?.password && <span>{errors.password.message}</span>}
      </div>
      <input type="Password" {...register('password')} />

      <div>
        <label htmlFor="">Phone number</label>
        {errors?.phone && <span>{errors.phone.message}</span>}
      </div>
      <input type="string" {...register('phone')} />

      <button type="submit" className="button">
        Enviar
      </button>
    </form>
  );
}

That's it guys! I hope you enjoyed reading it, and that it helped you understand a little about how it works.

Also, if you have any advices or comments on this, please leave a comment!

How to use DEV.to API

Guilherme Cheng — Mon, 22 May 2023 01:48:56 +0000

In this post, we'll explore how to use the DEV.to API and show some practical examples of how you can use it in your application to display the list of published posts and how to show a post.

What is the Dev.to API?

The DEV.to API is an application programming interface (API) that allows developers to interact with the DEV.to platform. With it, you can create, read, update, and delete articles, as well as perform other operations related to community interactions, such as following users, listing followers, getting notifications, and much more.

How to use the API?

The API can be used by any application, with or without an API Key. In your application, just fetch the endpoint, as follows:

How to show artibles list without API Key:

const articles = fetch(`https://dev.to/api/articles?username=${username}`).then((res) => res.json());

Response

[
  {
    "type_of": "article",
    "id": 1419842,
    "title": "Hey there!",
    "description": "Did u know, that this is my first draft? I'm actually testing the API",
    "readable_publish_date": "Apr 6",
    "slug": "hey-there-34hj",
    "path": "/guilhermecheng/hey-there-34hj",
    "url": "https://dev.to/guilhermecheng/hey-there-34hj",
    "comments_count": 0,
    "public_reactions_count": 0,
    "collection_id": null,
    "published_timestamp": "2023-04-06T23:29:44Z",
    "positive_reactions_count": 0,
    "cover_image": null,
    "social_image": "https://dev.to/social_previews/article/1419842.png",
    "canonical_url": "https://dev.to/guilhermecheng/hey-there-34hj",
    "created_at": "2023-03-29T23:59:07Z",
    "edited_at": null,
    "crossposted_at": null,
    "published_at": "2023-04-06T23:29:44Z",
    "last_comment_at": "2023-04-06T23:29:44Z",
    "reading_time_minutes": 1,
    "tag_list": [

    ],
    "tags": "",
    "user": {
      "name": "Guilherme Cheng",
      "username": "guilhermecheng",
      "twitter_username": null,
      "github_username": "Guilhermecheng",
      "user_id": 1046757,
      "website_url": null,
      "profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--sDcHxoDy--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1046757/543e3ca0-4f99-46ba-b8a1-79c06976b72b.jpeg",
      "profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--4IlcgxTN--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1046757/543e3ca0-4f99-46ba-b8a1-79c06976b72b.jpeg"
    }
  }
]

Get article by id

const article = fetch(`https://dev.to/api/articles/${articleId}`).then((res) => res.json());

Get article by post slug

const article = fetch(`https://dev.to/api/articles/<your_username>/${slug}`).then((res) => res.json());

User data

By user_id

const user = fetch(`https://dev.to/api/users/${userId}`).then((res) => res.json());

By username

const user = fetch(`https://dev.to/api/users/by_username?url=${username}`).then((res) => res.json());

With the API Key

Setting up your application to use the DEV.to API:

Before you start using the DEV.to API, you'll need to configure your application to authenticate properly. To do this, follow these steps:

Access the settings page of your account on DEV.to and generate an API Key.
In your code, use this API Key to authenticate your requests to the API. There are libraries for various languages that make this process easier, so choose the one that best suits your application.

Display the list of posts with the API Key

const articles = fetch("<https://dev.to/api/articles/me>", {
    headers: {
      "api-key": process.env.API_KEY,
    },
}).then((res) => res.json());

Other possibilities through the API

Now that you've configured your application to use the DEV.to API, let's take a look at what else you can do:

Publish a new article: Use the API to create a new article directly from your application, automating the publication process and allowing you to share content more efficiently.
Retrieve articles from a specific user: With the API, you can get a list of articles published by a particular user. This can be useful for displaying a "recent articles" section on your website or application.
List your followers: Through the API, you can get a list of users who follow you on DEV.to. This information can be used to personalize the experience of your followers in your own application.
Send notifications: The API also allows you to send notifications to your followers on DEV.to. For example, you can send a notification to your followers when you publish a new article or perform some other relevant action.