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'),

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.

Hugh Haworth

CSS-Tricks

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

1 Reply

Dan Harrin•2y ago

probably need a custom field because this is not real validation any more you can copy existing components and tweak them

Gaming

Programming

Custom AlpineJS validation