如何挂钩 livewire 2 中的验证错误事件？

Question

阅读 https://laravel-livewire.com/docs/2.x/input-validation 中的验证工作原理当我有时，我没有发现 livewire 2 中是否有方法挂钩事件的验证错误，因为我需要发送 dispatchBrowserEvent 事件用 toastr 显示消息？

我的表格比较大，验证字段可以在屏幕外我想提醒用户存在验证错误...

更新块 #1： 您建议摆脱 livewire 验证方法并使用 laravel 验证方法，写在这里 https://laravel.com/docs/8.x/validation，喜欢：

   $validator = Validator::make($request->all(), [
            'title' => 'required|unique:posts|max:255',
            'body' => 'required',
        ]);

        if ($validator->fails()) {
   ...

在我的组件中，我在 1 个变量 $form 下定义了所有变量：

public $form
    = [
        'name'               => '',
        'state_id'           => '',

 ...
 

public function firstStepSubmit()
{
    $rules = [
        'name'         => 'required',
        'state_id'     => 'required',
    ];

    $validation = Validator::make( $this->form, $rules, Hostel::getValidationMessagesArray());
    $failed     = $validation->fails();
    if ($failed) {
        $errorMsg = $validation->getMessageBag();
        $focus_field = array_key_first($errorMsg->getMessages());

        $this->dispatchBrowserEvent('PersonalPageMessageWarning', [
            'title'   => 'Personal Hostel',
            'message' => 'Your hostel has invalid data !',
            'focus_field' => str_replace('form.', '', $focus_field ),
        ]);

        $validation->validate(); // What for this line ? Looks like we really need it ?
        return;
    }

    $this->currentStep = 2;
} // public function firstStepSubmit()

//什么是
```
$validation->validate(); 
```

失败块内的行？我们真的需要它吗？
2) 转向 laravel 原始方法 sems 对我来说是退后一步......有一些 livewire hooks/methods 吗？

提前致谢！

Answer 1

我找到了解决方案。假设您有下一个：

// in blade
<div class="col-md-6 flex-row">
   <label for="name">Name</label>
   <input id="name" type="text" class="form-control flex-row" wire:model="name">
   @error('name') <span class="error" style="color: #ff0000">{{ $message }}</span> @enderror
</div>
<div class="col-md-6 flex-row">
   <label for="last_name">Name</label>
   <input id="last_name" type="text" class="form-control flex-row" wire:model="last_name">
   @error('last_name') <span class="error" style="color: #ff0000">{{ $message }}</span> @enderror
</div>
.... // all the rest of elements

//in component
public $name, $last_name; 
// the rest of properies

public function store()
{
    $validation = Validator::make([
       'name' => $this->name,
       'last_name' => $this->last_name,
        .....
    ], $this->rules());

    if ($validation->fails()) {
       $errorMsg = $validation->getMessageBag();
       $this->dispatchBrowserEvent('focusErrorInput',['field' => array_key_first($errorMsg->getMessages())]);
       $validation->validate();
    }

   //... other code

现在，如果验证失败，上述验证会检查所有 non-validated 字段的分派和事件，并在 blade 的脚本标记中按错误包字段的顺序处理元素焦点.所以，如果元素在 windows 之外，这将被聚焦

<script>
window.addEventListener('focusErrorInput', event => {
   var $field = '#' + event.detail.field;
   $($field).focus()
})
</script>

如何挂钩 livewire 2 中的验证错误事件？

How to hook event of validation error in livewire 2?

laravel-livewire