当所需字段失去焦点时，Laravel livewire 实时验证-解网

问：

实时表单验证正在使用 livewire 的开箱即用验证功能进行工作。但是我希望它在必填字段失去焦点并且用户没有填充该字段时起作用。使用下面范围的规则，我发现验证仅在字段中输入空格或字符太少时才有效。总之，“必需”规则并不像我所期望的那样起作用。我需要按 Tab 键在字段上或单击进入和退出它而不添加任何内容，然后在字段失去焦点时看到“所需数据”错误。

有没有我缺少的简单修复程序？

模板

  <input 
           type="text" wire:model.blur="card_name" id="card_name" name="card_name" autocomplete="" required
           class="block w-full rounded-md shadow-sm border-gray-30 focus:ring-governor-bay-500 focus:border-governor-bay-500 sm:text-sm 
@error('card_name') border-red-600 @else border-gray-300 @enderror"               
         >

组件验证

#[Rule([
    'card_name' => 'required|min:5',
], message: [
    'required' => 'Name on card is required.',
    'min' => 'Name on card is too short.',
], attribute: [
    'Name on cards.*' => 'Name on card',
])]
public $card_name = [];

Laravel 验证

经过进一步的调查，我认为问题是这样的： - 尽管在字段上按 Tab 键会导致网络请求（livewire/update），这要归功于添加到输入标签中的“wire：model.blur=”form.card_number”。- 但 Livewire 确定模型没有更改，因此不会检查规则。我想它必须以这种方式工作，否则规则会在初始渲染时抛出错误？- 我现在认为解决方案是使用规则（在组件渲染时我可以访问这些规则）手动显示与我的场景相同的内联错误。

答：

0赞 bilal ehsan 10/12/2023 #1

若要实现所需的行为，可以使用 JavaScript 处理输入字段的焦点和模糊事件，然后在字段失去焦点而未输入任何值时显式触发验证。

您可以在 livewire 组件中侦听焦点和模糊事件，并使用自定义逻辑进行验证。您还可以使用以下方法添加自定义错误。

$this->addError('Your-field-name', 'custom error message');

上一个：Laravel，如何仅在前一个规则为真时执行规则

下一个：在 Laravel 验证中创建自定义必需规则

当所需字段失去焦点时，Laravel livewire 实时验证

Laravel livewire realtime validation when required field loses focus

评论