Skip to content

Unidad 5.24 - Livewire: Formularios Reactivos y Validación

5.24.1 Introducción

En la unidad anterior exploramos en profundidad el ciclo de vida de un componente Livewire y cómo se activan sus hooks ante diferentes eventos. Ahora vamos a aplicar esos conocimientos en un contexto práctico y muy habitual: la creación de formularios reactivamente validados.

Livewire nos permite validar datos en tiempo real mientras el usuario interactúa con los formularios, sin necesidad de recargar la página ni escribir JavaScript. Utilizaremos los hooks updating, updated, render, y dehydrate para mejorar la experiencia del usuario y controlar el flujo de validación.

5.24.2 Objetivos del Ejemplo

Vamos a crear un formulario de contacto con los siguientes campos:

  • Nombre
  • Email
  • Mensaje

La aplicación permitirá:

  • Mostrar errores de validación a medida que el usuario escribe.
  • Validar el formulario completo al enviarlo.
  • Registrar en un log visual los hooks que se ejecutan.

5.24.3 Estructura del Componente

El componente se llamará ContactoForm. Tendrá:

  • Propiedades públicas para cada campo del formulario.
  • Reglas de validación definidas.
  • Un array $log para registrar hooks.
  • Hooks updating, updated, dehydrate, render().
  • Método enviar() para validar y procesar el formulario.

En la siguiente sección implementaremos paso a paso este componente, explicando a fondo cada parte.

5.24.4 Creación del componente ContactoForm y su plantilla

1️⃣ Crear el componente

Ejecutamos el comando habitual para generar un nuevo componente:

php artisan make:livewire ContactoForm

Esto creará dos archivos:

  • app/Http/Livewire/ContactoForm.php
  • resources/views/livewire/contacto-form.blade.php

2️⃣ Implementación del componente (ContactoForm.php)

namespace App\Http\Livewire;

use Livewire\Component;

class ContactoForm extends Component
{
    public $nombre = '';
    public $email = '';
    public $mensaje = '';
    public $log = [];

    protected $rules = [
        'nombre' => 'required|min:3',
        'email' => 'required|email',
        'mensaje' => 'required|min:10'
    ];

    public function updating($propiedad, $valor)
    {
        $this->log[] = "⏳ updating: \$propiedad = \$valor";
    }

    public function updated($propiedad, $valor)
    {
        $this->log[] = "✔️ updated: \$propiedad = \$valor";

        $this->validateOnly($propiedad);
    }

    public function enviar()
    {
        $this->validate();

        $this->log[] = '📤 Formulario enviado correctamente';
        $this->reset(['nombre', 'email', 'mensaje']);
    }

    public function dehydrate()
    {
        $this->log[] = '🔥 dehydrate() ejecutado';
    }

    public function render()
    {
        return view('livewire.contacto-form');
    }
}

✅ Aquí:

  • updated lanza validación individual con validateOnly().
  • enviar() valida todo y simula envío.
  • Cada hook anota una entrada en $log.

3️⃣ Vista del componente (contacto-form.blade.php)

<div style="font-family: sans-serif; max-width: 600px; margin: auto;">
    <h2>Formulario de Contacto</h2>

    <form wire:submit.prevent="enviar">
        <label>Nombre:</label>
        <input type="text" wire:model="nombre">
        @error('nombre') <small style="color: red;">{{ $message }}</small> @enderror

        <label>Email:</label>
        <input type="email" wire:model="email">
        @error('email') <small style="color: red;">{{ $message }}</small> @enderror

        <label>Mensaje:</label>
        <textarea wire:model="mensaje"></textarea>
        @error('mensaje') <small style="color: red;">{{ $message }}</small> @enderror

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

    <h3>📜 Log de hooks</h3>
    <ul>
        @foreach(array_reverse($log) as $linea)
            <li>{{ $linea }}</li>
        @endforeach
    </ul>
</div>

✅ Usamos @error para mostrar errores de validación inmediatamente. ✅ Cada cambio en los campos genera hooks visibles en el log.

5.24.5 Análisis del comportamiento de los hooks en un formulario

Una vez creado el formulario, es el momento de observar cómo se comportan los distintos hooks de Livewire cuando el usuario interactúa con los campos. Esto nos permitirá entender la validación reactiva en profundidad.

✍️ Introducir datos en los campos

Cuando empezamos a escribir en los campos del formulario:

  1. Cada pulsación que modifica un valor dispara el hook updating.
  2. Justo después, se ejecuta updated, donde se valida el campo editado con validateOnly().
  3. Finalmente, la vista se vuelve a renderizar y aparece cualquier error en pantalla si lo hay.

Ejemplo del log al escribir en el campo nombre:

⏳ updating: nombre = J
✔️ updated: nombre = J
🔥 dehydrate() ejecutado
⏳ updating: nombre = Ja
✔️ updated: nombre = Ja
🔥 dehydrate() ejecutado

✅ Podemos ver cómo cada cambio activa los hooks en orden, mostrando que Livewire está procesando y validando en tiempo real.

🚫 Introducir datos incorrectos

Si escribimos un email mal formado, por ejemplo correo@, veremos en el log:

⏳ updating: email = correo@
✔️ updated: email = correo@
🔥 dehydrate() ejecutado

Y en la vista, el mensaje de error aparecerá automáticamente:

El campo email debe ser una dirección de correo válida.

✅ No hace falta enviar el formulario para recibir validación inmediata.

📤 Enviar el formulario

Cuando todos los campos están correctos y pulsamos el botón "Enviar":

  1. Se ejecuta el método enviar(), que lanza validate().
  2. Si todo es válido, el log muestra un mensaje de éxito.
  3. Se ejecuta reset() para limpiar los campos.

Ejemplo del log al enviar correctamente:

📤 Formulario enviado correctamente
🔥 dehydrate() ejecutado

✅ No se vuelven a lanzar updating ni updated porque no hay cambio de propiedades individuales, pero sí se vuelve a renderizar.

5.24.6 Ejercicio práctico y resumen visual del flujo de validación

🧪 Ejercicio: Mejora del formulario con contador de caracteres

Añade una funcionalidad adicional al campo mensaje para mostrar en tiempo real el número de caracteres escritos.

📌 Instrucciones:

  1. Añade una nueva propiedad pública $longitudMensaje en el componente.
  2. En el hook updated, si la propiedad actualizada es mensaje, actualiza $longitudMensaje.
  3. Muestra en la vista la longitud del mensaje justo debajo del textarea.

💡 Código sugerido:

public $longitudMensaje = 0;

public function updated($propiedad, $valor)
{
    $this->log[] = "✔️ updated: \$propiedad = \$valor";
    if ($propiedad === 'mensaje') {
        $this->longitudMensaje = strlen($valor);
    }
    $this->validateOnly($propiedad);
}

Y en la vista:

<p>Longitud: {{ $longitudMensaje }} caracteres</p>

✅ Este ejercicio refuerza los conceptos de reactividad y uso de hooks para reflejar cambios inmediatos en la interfaz.

📊 Resumen visual del flujo del formulario

flowchart TD
    Escribir[Usuario escribe en campo] --> Updating["Hook updating()"]
    Updating --> Updated["Hook updated()"]
    Updated --> Validacion["Validación con validateOnly()"]
    Validacion --> Render["render()"]
    Render --> Dehydrate["dehydrate()"]

    Enviar[Usuario pulsa 'Enviar'] --> EnviarMetodo["método enviar()"]
    EnviarMetodo --> Validate["Validación completa"]
    Validate --> Reset["Limpiar campos"]
    Reset --> RenderEnvio["render() + dehydrate()"]

Con este flujo, los estudiantes pueden ver claramente cómo se encadenan las fases del ciclo de vida con la validación de datos.

Con esto finalizamos la unidad dedicada a los formularios con Livewire. Has aprendido a construir un formulario completo con validación reactiva, observando paso a paso cómo se comportan los hooks del ciclo de vida. En la próxima unidad veremos cómo gestionar listas dinámicas de elementos combinando reactividad y persistencia de datos.