Formularios y Validación

En HTML nativo, un formulario guarda sus valores internamente en el DOM. React propone un enfoque diferente llamado "formulario controlado": el componente es el único dueño de los valores mediante estado. El ciclo es: usuario escribe → onChange dispara → setEstado actualiza → React re-renderiza → el input muestra el valor del estado.

Este ciclo hace que React siempre sepa exactamente qué hay en el formulario, lo que facilita validar, transformar y enviar los datos.

La validación en formularios controlados es natural: antes de procesar el submit, recorres el objeto de estado aplicando tus reglas de negocio y acumulas los errores en un objeto.

Si hay errores, los muestras junto a cada campo y no envías; si todo está bien, llamas a tu API. e.preventDefault() en onSubmit es fundamental: evita que el comportamiento HTML nativo recargue la página. Para formularios con muchos campos y validaciones complejas, React Hook Form reduce el código a la mitad.

import { useState } from "react";

function FormRegistro() {
  const [form, setForm] = useState({
    nombre: "", email: "", password: "", confirmar: ""
  });
  const [errores, setErrores] = useState({});
  const [enviado, setEnviado] = useState(false);
  
  const validar = () => {
    const nuevosErrores = {};
    if (form.nombre.length < 2)
      nuevosErrores.nombre = "Mínimo 2 caracteres";
    if (!/^[^@]+@[^@]+\.[^@]+$/.test(form.email))
      nuevosErrores.email = "Email inválido";
    if (form.password.length < 8)
      nuevosErrores.password = "Mínimo 8 caracteres";
    if (form.password !== form.confirmar)
      nuevosErrores.confirmar = "Las contraseñas no coinciden";
    return nuevosErrores;
  };
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
    // Limpiar error del campo al escribir
    if (errores[name]) {
      setErrores(prev => ({ ...prev, [name]: "" }));
    }
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    const erroresNuevos = validar();
    if (Object.keys(erroresNuevos).length > 0) {
      setErrores(erroresNuevos);
      return;
    }
    setEnviado(true);
    console.log("Formulario válido:", form);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input name="nombre" value={form.nombre} onChange={handleChange} />
      {errores.nombre && <span className="error">{errores.nombre}</span>}
      <button type="submit">Registrarse</button>
    </form>
  );
}