4. Cómo validar un email en Filament 5: formato correcto sin esfuerzo

Ayer hiciste que el nombre sea obligatorio y viste cómo Filament bloquea automáticamente los campos vacíos. Hoy vamos a agregar un segundo campo: el email. Pero no será cualquier campo, será un campo inteligente que detecta si escribiste «correo@valido.com» o «correo-invalido». Filament valida el formato automáticamente, tú solo agregas una palabra mágica.

🎯 Objetivo de hoy

Agregar un campo de email y validar que tenga formato correcto usando ->email().

🖥️ Antes / Después

Antes: Solo tienes el campo «Name» en tu formulario. No puedes guardar el email del cliente.

Después: Tendrás un campo «Email» que se pone rojo si escribes «correo-invalido» y verde si escribes «juan@empresa.com».

📁 Estructura de carpetas (mapa de hoy)

app/Filament/Resources/
└── Customers/                    ⚪ Carpeta del Resource
    ├── CustomerResource.php      ⚪ No lo tocamos hoy
    └── Pages/                    ⚪ No lo tocamos hoy
    |   ├── CreateCustomer.php    ⚪ No lo tocamos hoy
    |   ├── EditCustomer.php      ⚪ No lo tocamos hoy
    |   └── ListCustomers.php     ⚪ No lo tocamos hoy
    ├── Schemas/
    |   └── CustomerForm.php      🟡 🎯 AQUÍ TRABAJAMOS HOY
    └── Tables/
        └── CustomersTable.php    ⚪ No lo tocamos hoy

Hoy modificamos solo el archivo marcado con 🟡. Los demás archivos existen pero no los tocaremos.

📋 Paso 1: Tu código de ayer

Este es el código que tienes actualmente con el campo name obligatorio.

📄 Ruta: app/Filament/Resources/Customers/Schemas/CustomerForm.php

<?php

namespace App\Filament\Resources\Customers\Schemas;

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

class CustomerForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')
                    ->required(),
            ]);
    }
}

Hoy agregaremos un segundo campo después del name. Fíjate que después de ->required() hay una coma, eso nos permite agregar más campos.

➕ Paso 2: Tu ladrillo de hoy (dos líneas nuevas)

📄 Ruta: app/Filament/Resources/Customers/Schemas/CustomerForm.php

// 🔧 Implementamos: campo de email con validación de formato
TextInput::make('email')
    ->email(),

La palabra email() le dice a Filament: «Este campo debe tener formato de correo electrónico». Filament verifica que tenga arroba, dominio y punto automáticamente.

✅ Paso 3: Código completo con tu ladrillo

📄 Archivo del formulario actualizado

Ruta completa: app/Filament/Resources/Customers/Schemas/CustomerForm.php

<?php

namespace App\Filament\Resources\Customers\Schemas;

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

class CustomerForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')
                    ->required(),
                // ✅ Implementado: campo de email con validación de formato
                TextInput::make('email')
                    ->email(),
            ]);
    }
}

¿Viste el cambio? Agregamos un segundo TextInput::make('email') después del name. La coma después de ->required() es crucial, permite que exista un siguiente elemento en la lista.

🎉 Verifica tu magia

Abre tu navegador y sigue estos pasos:

1. Ve a http://tuproyecto.test/admin/customers
2. Haz clic en «New customer»
3. Escribe un nombre válido en «Name»
4. En el campo «Email» escribe: correo-invalido (sin arroba)
5. Haz clic en «Create»
6. ¡Filament te detiene! Verás un mensaje rojo: «The email field must be a valid email address.»
7. Ahora escribe maria@empresa.com y guarda
8. Debería guardar sin problemas

Si la validación no funciona, revisa que:

• Haya una coma después de ->required() en la línea anterior
• No haya coma después de ->email() (es el último elemento por ahora)
• La columna email exista en tu base de datos

¿Lo ves? ¡Filament validó el formato de email por ti! Detectó la arroba, el dominio y el punto automáticamente.

---

💬 ¿Viste cómo Filament protege tu base de datos de emails inválidos? Con solo dos líneas, agregaste un campo profesional con validación incluida. Mañana aprenderemos a hacer que el email también sea obligatorio, combinando ->required() con ->email(). ¿Te animas a seguir construyendo?

📖 Fuente oficial: Documentación de Filament 5 — Validation

➡️ Próximo paso: Mañana haremos que el email sea obligatorio también, combinando ->required()->email(). Verás cómo encadenar múltiples validaciones en un solo campo.