It’s #FrontendFriday – Formvalidierung in React mit Zod

Eine effektive Möglichkeit, eine Formvalidierung in React durchzuführen, bietet hier die Bibliothek Zod [1]. Zod ist ein deklaratives Validierungsschema, das leichtgewichtig und einfach zu integrieren ist.

Vorteile von Zod für die Formvalidierung

• Leichte Integration – Die Einrichtung und Integration in das entsprechende Formular ist schnell und einfach.
• Hohe Flexibilität – Die Möglichkeiten zur Validierung einzelner Felder sind sehr umfangreich und auch custom Validierungen sind problemlos möglich.
• Intuitive Nutzung – Die Nutzung ist leicht verständlich und nutzbar.

Integration von Zod in React

Um Zod in einem React-Projekt zu verwenden, müssen zunächst die entsprechenden npm-Pakete installiert werden:

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

Anschließend kann ein Formular validiert werden, indem ein Schema definiert und zur Validierung verwendet wird:

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;

In den Zeilen 5-12 wird ein Schema angelegt, inkl. Validierungskriterien und Fehlermeldungen. Anschließend wird die Form initialisiert und ab Zeile 27 erfolgt die Darstellung. Und schon ist das Formular mit unterschiedlichen Validierungen implementiert. 

 

Quellen:

[1]: Zod

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

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