It's #FrontendFriday - Form validation in React with Zod

An effective way to perform form validation in React is offered by the library Zod [1]. Zod is a declarative validation schema that is lightweight and easy to integrate.

Advantages of Zod for mold validation

• Easy integration - The setup and integration into the corresponding form is quick and easy.
• High flexibility - The options for validating individual fields are very extensive and custom validations are also possible without any problems.
• Intuitive use - It is easy to understand and use.

Integration of Zod in React

To use Zod in a React project, the corresponding npm packages must first be installed:

„npm install zod„
„npm install react-hook-form„

A form can then be validated by defining a schema and using it for validation:

import { useState } from "react";
import { useForm } from 'react-hook-form';
import { z } from "zod";

const formSchema = z.object({
  name: z.string().min(2, { message: "Name muss mindestens 2 Zeichen lang sein." }),
  email: z.string().email({ message: "Ungültige E-Mail-Adresse." }),
  age: z.number().min(18, { message: "Mindestalter ist 18 Jahre." }),
  street: z.string().min(1, { message: "Ort muss mindestens 1 Zeichen lang sein." }),
  postcode: z.number().length(5, { message: "Die PLZ muss genau 5 Zeichen lang sein." }),
  city: z.string().min(1, { message: "Ort muss mindestens 1 Zeichen lang sein." }),
});

const MyFrontendFridayForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(formSchema),
  });

  const onSubmit = (data) => {
    console.log("Formulardaten sind gültig:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          {...register("name")}
        />
        {errors.name && <p>{errors.name.message}</p>}
      </div>

      <div>
        <label>Email:</label>
        <input
          type="email"
          {...register("email")}
        />
        {errors.email && <p>{errors.email.message}</p>}
      </div>

      <div>
        <label>Alter:</label>
        <input
          type="number"
          {...register("age")}
        />
        {errors.age && <p>{errors.age.message}</p>}
      </div>

      <div> 
        <label>Straße und Hausnummer:</label>
        <input
          type="text"
          {...register("street")}
        /> 
        {errors.street && <p>{errors.street.message}</p>} 
      </div>

      <div> 
        <label>PLZ:</label> 
        <input 
          type="number"
          {...register("postcode")}
        />
        {errors.postcode && <p>{errors.postcode.message}</p>}
      </div>

      <div> 
        <label>Ort:</label>
        <input 
          type="text" 
          {...register("city")}
        />
        {errors.city && <p>{errors.city.message}</p>}
      </div>
      <button type="submit">Absenden</button>
    </form>
  );
};

export default MyFrontendFridayForm;

A schema is created in lines 5-12, including validation criteria and error messages. The form is then initialized and displayed from line 27. And the form is already implemented with different validations. 

 

Sources:

[1]: Zod

[2]: DEV- Validating forms in React Apps with Zod

[3]: freeCodeCamp - How to Validate Forms with Zod and React-Hook-Form