🧱 Formularios y validaciones con React Hook Form

16 - 🧱 Formularios y validaciones con React Hook Form

Aprende a manejar formularios en Next.js de manera eficiente y con validaciones usando React Hook Form.

---

🔍 ¿Qué es React Hook Form?

React Hook Form (RHF) es una librería para manejar formularios en React/Next.js que ofrece:

• Registro de campos mediante hooks (register).
• Validaciones simples o complejas.
• Optimización del rendimiento al evitar renders innecesarios.
• Manejo fácil de errores y estados del formulario.

💡 Ideal para formularios de login, registro, encuestas, o cualquier formulario interactivo.

Instalación:

npm install react-hook-form

---

📝 Formulario básico con React Hook Form

Vamos a crear un formulario de contacto con validaciones básicas:

// app/contact/page.js
"use client";
import { useForm } from "react-hook-form";

export default function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    alert(JSON.stringify(data, null, 2));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="max-w-md mx-auto p-4 space-y-4 border rounded shadow">
      <div>
        <label className="block font-bold">Nombre</label>
        <input
          className="w-full border p-2 rounded"
          {...register("nombre", { required: "El nombre es obligatorio" })}
        />
        {errors.nombre && <p className="text-red-500 mt-1">{errors.nombre.message}</p>}
      </div>

      <div>
        <label className="block font-bold">Email</label>
        <input
          type="email"
          className="w-full border p-2 rounded"
          {...register("email", {
            required: "El email es obligatorio",
            pattern: {
              value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
              message: "Email inválido"
            }
          })}
        />
        {errors.email && <p className="text-red-500 mt-1">{errors.email.message}</p>}
      </div>

      <div>
        <label className="block font-bold">Mensaje</label>
        <textarea
          className="w-full border p-2 rounded"
          {...register("mensaje", { required: "El mensaje es obligatorio" })}
        />
        {errors.mensaje && <p className="text-red-500 mt-1">{errors.mensaje.message}</p>}
      </div>

      <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">Enviar</button>
    </form>
  );
}
      

🧩 Resultado visual:

Nombre: campo obligatorio

Email: formato válido requerido

Mensaje: campo obligatorio

---

✅ Validaciones avanzadas

Puedes usar funciones personalizadas o librerías externas como yup para validar formularios complejos.

import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

const schema = yup.object({
  nombre: yup.string().required("El nombre es obligatorio"),
  email: yup.string().email("Email inválido").required("El email es obligatorio"),
  edad: yup.number().min(18, "Debes ser mayor de 18").required("La edad es obligatoria")
}).required();

export default function FormularioAvanzado() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <input {...register("nombre")} placeholder="Nombre" />
      {errors.nombre && <p>{errors.nombre.message}</p>}
      <input {...register("email")} placeholder="Email" />
      {errors.email && <p>{errors.email.message}</p>}
      <input {...register("edad")} placeholder="Edad" type="number" />
      {errors.edad && <p>{errors.edad.message}</p>}
      <button type="submit">Enviar</button>
    </form>
  );
}
      

---

✅ Resumen

• 📝 React Hook Form permite manejar formularios con hooks y validaciones de manera eficiente.
• ⚡ Minimiza renders innecesarios y mejora el rendimiento.
• 🔍 Integrable con librerías de validación externas como yup o zod.
• 💡 Facilita mostrar errores y estados de los formularios de forma sencilla y clara.

← Volver al índice