Livewire validation with custom rule doesn't show error

Question

Following this question and this other question, I managed to create the flatpickr element and to send data to the backend. The problem is that, although in the Rule that validates the datetime the passes method returns false, the validation error is not shown in the form.

For sake of easy-reading, this is the blade portion for the datepicker:

<div class="mb-3" wire:ignore>
    <label for="pickeddatetime" class="form-label">Date and time</label>
    <input id="pickeddatetime" class="form-control @error('pickeddatetime') is-invalid @enderror"
           type="datetime-local" name="pickeddatetime" placeholder="Pick a date and time"
           value="{{ old('pickeddatetime') }}" wire:model.debounce.500ms="pickeddatetime">
    @error('pickeddatetime')
    <p class="invalid-feedback">{{ $errors->first('pickeddatetime') }}</p>
    @enderror
</div>

I believe it is due to the wire:ignore directive (used to make flatpickr work with Livewire) preventing any change in the DOM but, again, I'm still learning and thus be completely wrong.

Update

I moved wire:ignore inside the input field, and that's the only change I made in the Blade file. There are no other wire:ignore in there, and the @livewireScripts is in the layout file (I can see the scripts in the DOM of the Livewire component).

The validation goes as follows: when the datetime is selected, the updatedPickeddatetime is called (and indeed it is)

public function updatedPickeddatetime($value)
{
    $rules = $this->rules();

    $rules['pickeddatetime'][] = new TimeSlotEmployeeRule($this->employee_id);
    $this->validateOnly('pickeddatetime', $rules);
}

In the TimeSlotEmployeeRule the passes method returns false (for testing purposes).

I placed some strategic dds inside the validateOnly method, and i can see that the ValidationException is thrown and the ErrorBag contains the expected message.

Yet, the @error directive (for the p element) isn't triggered and the element is not shown.

Update 2: solved!

Apparently, the problem was related, but laying somewhere else: the @error directive works fine, but I noticed that in the DOM the p was set as display:none. This, I think, is related to the fact that the input doesn't get its is-invalid class, and thus the invalid-feedback gets hidden.

I therefore changed it to <p class="invalid-feedback d-block"> (as suggested here) and it works!

Qirel · Accepted Answer · 2023-07-19 21:36:55Z

2

You're right, the wire:ignore on the parent div makes Livewire ignore any updates to that part of the DOM. It will never change anything inside of it.

So, to make the paragraph show, simply move the wire:ignore down on the input itself.

<div class="mb-3">
    <label for="pickeddatetime" class="form-label">Date and time</label>
    <input id="pickeddatetime" wire:ignore.self class="form-control @error('pickeddatetime') is-invalid @enderror"
           type="datetime-local" name="pickeddatetime" placeholder="Pick a date and time"
           value="{{ old('pickeddatetime') }}" wire:model.debounce.500ms="pickeddatetime">
    @error('pickeddatetime')
    <p class="invalid-feedback">{{ $errors->first('pickeddatetime') }}</p>
    @enderror
</div>

You will still need wire:ignore or wire:ignore.self on the input, as the Flatpickr library will modify and maintain state of the actual input.

This only solves half of your issue though, as you will still not get the class is-invalid applied when the validation for that property fails. To achieve this, either put the class on a wrapper, and then apply CSS in such a way that it'll be put on the input, or else you would need some sort of listener or change-event on the Flatpickr instance, and then check if the validation failed before applying or removing the class on the input, meaning that you apply it with JavaScript.

answered Jul 19, 2023 at 21:36

Qirel

26.6k7 gold badges54 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cynical Over a year ago

Unfortunately, it doesn't work. I tried on a simple numeric input (to see if the problem is related to flatpickr or not): wherever I put wire:ignore or wire:ignore.self (div or input doesn't matter) the error directives are not triggered.

Qirel Over a year ago

Well, let's see your code then. Could it be that you haven't added @livewireScripts, or that you have another wire:ignore?

Cynical Over a year ago

I updated my question with further information. I agree with you that what you suggested should work, yet I can't understand why it doesn't.

Cynical Over a year ago

I finally worked it out and updated my solution for sake of completeness. Your suggestion to my original question (move the wire:ignore in the input) was indeed the correct one to fix the problem, so have it accepted!

Qirel Over a year ago

Ah, happy to hear you figured it out!

Collectives™ on Stack Overflow

Livewire validation with custom rule doesn't show error

Update

Update 2: solved!

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

Update 2: solved!

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related