FilamentF
Filament•3y ago
Kuldeep

Custom AlpineJS validation

I'm using the Filament - and my form is like this:

Forms\Components\Toggle::make('profile_data_is_employed')
    ->label('At least one of us is employed'),
Forms\Components\Toggle::make('profile_data_is_student')
    ->label('At least one of us is student'),


With just the above code I get a form display and if I do a validation process with filament it'll stop submitting the form. I just want to display a validation message only, but form submission still continues.

So, I need to do a custom validation process like this: https://css-tricks.com/lightweight-form-validation-with-alpine-js-and-iodine-js/ but with only AlpineJS nothing else.

1) Validation message is not displayed - From the backend through filament validation message will be displayed but it'll be done after the form submission.
2) I want to display a validation message on focus out, blur, etc. events but it'll not work.

I've tried this type of process to display a validation message: https://alpinejs.dev/globals/alpine-bind but didn't get a proper solution.
image.png
CSS-TricksHugh Haworth
Lightweight Form Validation with Alpine.js and Iodine.js | CSS-Tricks
Many users these days expect instant feedback in form validation. How do you achieve this level of interactivity when you’re building a small static site or a
bind() — Alpine.js
Was this page helpful?