6. Cómo validar el formato de email en Filament 5 – Validación automática que protege tu base de datos

Hoy vas a proteger tu formulario de datos incorrectos. Agregarás una validación inteligente que detecta automáticamente si el email tiene formato válido antes de guardarlo. Tus usuarios verán un mensaje de error amigable si escriben mal su correo.

🎯 Objetivo de hoy

Agregar validación de formato email al campo email usando ->email() en CustomerForm.php.

🖥️ Antes / Después

Antes: El campo email acepta cualquier texto, incluso «correo-mal-escrito». Al guardar, la base de datos recibe basura.

Después: Filament verifica automáticamente que sea un email válido. Si el usuario escribe «juan@correo», verá un mensaje rojo: «The email field must be a valid email address.»

📁 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

📄 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(),
                TextInput::make('email'),
            ]);
    }
}

➕ Paso 2: Tu ladrillo de hoy (1 línea)

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

// 🔧 Implementamos: Validación de formato email
// Agregamos ->email() para validar que el texto sea un correo válido
TextInput::make('email')
    ->email(),

El método ->email() activa la validación automática de Laravel. Filament mostrará un error si el formato no es válido.

✅ Paso 3: Código completo con tu ladrillo

📄 Archivo modificado

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(),
                TextInput::make('email')
                    ->email(),
            ]);
    }
}

🎉 Verifica tu magia

Abre tu navegador en /admin/customers/create y deberías ver:

• El campo «Email» sigue siendo un input de texto normal
• Escribe «juan» y presiona «Create» → Aparece mensaje rojo: «The email field must be a valid email address.»
• Escribe «juan@empresa.com» y presiona «Create» → El formulario se envía correctamente

¿No ves el mensaje de error? Revisa que hayas agregado ->email() después de TextInput::make('email') y no te falte la coma al final.

---

💬 ¿Viste cómo Filament protege tu base de datos? Con solo una línea, evitas que usuarios guarden correos mal escritos. Tu aplicación se ve más profesional y confiable.

Mañana aprenderemos a limitar la cantidad de caracteres que puede tener un campo. ¿Te animas a seguir construyendo?

📖 Fuente: Filament Forms Validation

➡️ Próximo paso: Limitar caracteres con ->maxLength() para que el email no sea eterno.