Livewire自定义规则验证不显示错误的问题及解决方法

问题背景 #

参考两个Stack Overflow问题后，我成功实现了flatpickr组件并能将数据发送至后端，但遇到一个问题：当验证datetime的自定义Rule中passes方法返回false时，表单并未显示验证错误。

日期选择器Blade代码片段 #

<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>

我怀疑是用于让flatpickr与Livewire兼容的wire:ignore指令阻止了DOM更新，但不确定。

调整wire:ignore位置 #

我将wire:ignore移至input标签内，这是Blade文件中唯一的修改，文件中无其他wire:ignore，且@livewireScripts已在布局文件中（可在Livewire组件的DOM中看到脚本）。

验证流程代码 #

选择datetime时会调用updatedPickeddatetime方法（已确认触发）：

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

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

测试时，TimeSlotEmployeeRule中的passes方法返回false。

我在validateOnly方法中添加了dd调试，可看到已抛出ValidationException，且ErrorBag中包含预期的错误信息，但@error指令并未触发，错误提示p元素未显示。

问题解决 #

问题根源并非之前所想：@error指令正常工作，但DOM中的p标签被设置为display:none，这是因为input未获取到is-invalid类，导致invalid-feedback被隐藏。

因此我将错误提示标签修改为：

<p class="invalid-feedback d-block">{{ $errors->first('pickeddatetime') }}</p>

问题得以解决！

内容的提问来源于stack exchange，提问作者Cynical