Livewire单表单多卡片如何自定义errorBag展示全部校验错误

问题场景 #

我的Livewire表单内置4个卡片模块，用户可自主选择1个或多个卡片完成填写，因此编写了条件判断逻辑，仅对用户选中的卡片执行数据校验，并基于选中卡片的数据完成数据库写入操作。
原组件CardFormComponent.php的提交逻辑如下：

public function submit()
{
    $user = auth()->user();
           
    if($this->showDiv1){
        $salary_data = $this->validate([
            'emp_name' => 'required',
            'emp_length' => 'required',
            'emp_monthly_gross_salary' => 'required',
            'monthly_allowance' => 'required',
        ])->validateWithBag('salary_error');
    }
    
    if($this->showDiv2){
        $gig_data = $this->validate([
            'role' => 'required',
            'est_earnings' => 'required',
        ])->validateWithBag('gig_error');
    }
        
    if($this->showDiv3){
        $self_data = $this->validate([
             'business_type' => 'required',
             'other_type' => 'required',
             'date_com_trade' => 'required',
             'no_of_emp' => 'required',
             'business_registration_number' => 'required',
             'office_ph_no' => 'required',
             'share_of_bus' => 'required',
             'last_2_year_profit' => 'required'
        ])->validateWithBag('self_error');
     }
            
     if($this->showDiv4){
         $investment_data = $this->validate([
              'inv_name' => 'required',
              'yearly_earning' => 'required',
         ])->validateWithBag('invest_error');
     }
     
     $user->user_current_step = Constant::CURR_STEP_COMMITMENT;
     $user->save();                    
                
     alert('success','Your income are saved.');
                
     return redirect()->route('borrower.landing');
                
}

存在问题 #

上述代码可正常保存所有卡片的用户输入，但存在如下问题：当用户选择2个及以上卡片并提交空表单时，仅第一个选中的卡片会展示校验错误提示；单独测试单个卡片提交时，所有卡片的错误提示均可正常展示，因此可排除前端错误消息渲染的问题。
初步推测原因为第一个卡片校验失败后，程序会直接返回视图，不会继续执行后续其他卡片的校验逻辑。
补充说明：有开发建议为每个卡片单独配置errorBag，也就是上述代码中调用validateWithBag('名称')的写法，但查阅资料后发现视图似乎仅能接收一个errorBag，且validateWithBag方法执行时会自动触发重定向。
核心需求：调整现有代码或采用替代方案，实现所有选中卡片的校验错误消息按对应卡片正常展示。

问题根因 #

原代码调用validate()/validateWithBag()时，一旦某组规则校验不通过，会立即抛出ValidationException中断后续代码执行，因此只会返回第一个触发失败的卡片错误，后续卡片的校验逻辑根本不会运行。
所谓“视图仅能接收一个errorBag”是误解，Livewire和Blade都支持同时渲染多个错误袋的内容，validateWithBag自动抛出异常终止流程的特性才是阻碍批量校验的核心原因。

实现方案 #

不要直接调用组件自带的validate方法，改用Laravel的Validator门面手动创建所有选中卡片的校验实例，跑完所有校验规则统一收集错误后，再一次性抛出校验异常，即可实现所有选中卡片的错误同时展示。
修改后的提交逻辑代码如下：

public function submit()
{
    $user = auth()->user();
    $validations = [];

    // 收集所有选中卡片的校验规则和对应数据
    if($this->showDiv1){
        $validations['salary'] = [
            'rules' => [
                'emp_name' => 'required',
                'emp_length' => 'required',
                'emp_monthly_gross_salary' => 'required',
                'monthly_allowance' => 'required',
            ],
            'data' => $this->only(['emp_name','emp_length','emp_monthly_gross_salary','monthly_allowance'])
        ];
    }

    if($this->showDiv2){
        $validations['gig'] = [
            'rules' => [
                'role' => 'required',
                'est_earnings' => 'required',
            ],
            'data' => $this->only(['role','est_earnings'])
        ];
    }

    if($this->showDiv3){
        $validations['self'] = [
            'rules' => [
                'business_type' => 'required',
                'other_type' => 'required',
                'date_com_trade' => 'required',
                'no_of_emp' => 'required',
                'business_registration_number' => 'required',
                'office_ph_no' => 'required',
                'share_of_bus' => 'required',
                'last_2_year_profit' => 'required'
            ],
            'data' => $this->only(['business_type','other_type','date_com_trade','no_of_emp','business_registration_number','office_ph_no','share_of_bus','last_2_year_profit'])
        ];
    }

    if($this->showDiv4){
        $validations['invest'] = [
            'rules' => [
                'inv_name' => 'required',
                'yearly_earning' => 'required',
            ],
            'data' => $this->only(['inv_name','yearly_earning'])
        ];
    }

    // 遍历执行所有校验，收集错误和通过校验的数据
    $allErrors = new \Illuminate\Support\MessageBag();
    $validatedData = [];
    foreach ($validations as $key => $config) {
        $validator = \Illuminate\Support\Facades\Validator::make($config['data'], $config['rules']);
        if ($validator->fails()) {
            // 合并当前校验的所有错误
            foreach ($validator->errors()->messages() as $field => $messages) {
                foreach ($messages as $message) {
                    $allErrors->add($field, $message);
                }
            }
        } else {
            $validatedData[$key] = $validator->validated();
        }
    }

    // 存在错误则统一抛出异常，所有错误会同步到前端
    if ($allErrors->isNotEmpty()) {
        throw new \Illuminate\Validation\ValidationException($allErrors);
    }

    // 所有校验通过后，处理对应数据入库
    $salary_data = $validatedData['salary'] ?? null;
    $gig_data = $validatedData['gig'] ?? null;
    $self_data = $validatedData['self'] ?? null;
    $investment_data = $validatedData['invest'] ?? null;

    // 原有入库逻辑写在这里

    $user->user_current_step = Constant::CURR_STEP_COMMITMENT;
    $user->save();                    

    alert('success','Your income are saved.');

    return redirect()->route('borrower.landing');
}

前端渲染说明 #

原有前端错误渲染逻辑不需要修改，直接用@error('字段名')判断即可，所有字段的错误已经被统一注册到默认错误袋，Livewire会自动匹配对应字段的错误消息，只要不同卡片的字段名不重复，就能在对应卡片位置正常展示错误提示。
如果需要按错误袋分组展示错误，只需要在抛出异常前手动为不同卡片的错误分配独立错误袋即可，Blade模板中可通过$errors->getBag('袋名')获取对应袋的错误集合。

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