Filament•8mo ago

Form validation messages

I have a simple form in Filament v3, but the validation errors shows as a default browser message (see screenshot) Is there a way I can show the validation errors in red under the form element or 1 single validation error box at the top of the page. ``` TextInput::make('name') ->label(__('products.name')) ->maxLength(255) ->required() ->validationAttribute('full name'),

11 Replies

Dennis Koch•8mo ago

Those are browser validation errors. I don’t think you can modify them 🤔

rominronin•8mo ago

Actually, I have a related question - I am working with Wizard steps, and would like to display input validation on the form, after some validations checks I can get the validation to halt progress and display a notification, but inline errors is what I really need. I'm going to try Laravel validation next. But I would appreciate a leg up 🙂 Ah, a custom rule would work in my case...

WimOP•8mo ago

But they don't display like normal Laravel validation errors or do they? I kind of don't like the browser style layout

Dennis Koch•8mo ago

You'd need to add novalidate to the form then.

WimOP•8mo ago

I'm using it in a regular form

 public static function form(Form $form,  ): Form
    {
        return $form
        ->schema([ ..])
    }

 public static function form(Form $form,  ): Form
    {
        return $form
        ->schema([ ..])
    }

so not in a Livewire custom form

Dennis Koch•8mo ago

Okay, I assumed the form builder, because you selected that tag. Not sure whether it's possible to add that inside the admin panel

Hasith•6mo ago

I have the same problem. I'm using filament form inside my Livewire component. Validation messages appear as browser validations. But i want to show them in red color below the input field like normal filament forms are showing in the panels. Is this some css problem ? TextInput::make('title')->rules(['required']) Use this instead of ->required(). @Wim @rominronin

Dennis Koch•6mo ago

No CSS issue. It’s the form validate tag. Pure HTML.

Hasith•6mo ago

Yeah. Solve the problem. I don't know the reason but browser validation messages only triggered when using ->required(). Using ->rules(['required']) fix my problem. I mention it here if anyone looks for it again. if you can mark this as the solution.

Dennis Koch•6mo ago

Yes. required() is a separate method so we can use this to apply browser validation. With rules() we’d need to scan the rules array which isn’t really worth it.

Hasith•6mo ago

Plus my presets are not working fine as well. So i manually copy and paste colors from that file to my tailwind.config file. not sure why it's not working. Maybe some conflict with require("daisyui"). I'm using MaryUi as my Ui library.

Gaming

Programming

Form validation messages