Laravel中如何验证循环生成的复选框至少勾选一个？

前端验证修复 #

原JS脚本存在拼写和选择器错误，导致无法正常检测复选框状态，同时需要添加错误提示和提交按钮禁用逻辑。修改后的Blade视图代码如下：

<form id="contact" action="{{url('/reservation')}}" method="post" enctype="multipart/form-data">
    @csrf
    <!-- 添加错误提示容器 -->
    <div id="checkbox-error" class="text-danger mb-3" style="display: none;">请至少选择一个产品</div>
    <div class="row col-12">
        @foreach($data as $item)
                <div class="row sm-6 ml-4 mb-1 no-gutters" style="height:25px; width: auto;">
                    <p class='text-dark mr-2'>
                        <input type="checkbox" name="prod_name[]" value="{{$item->title}}" class="products" /> 
                        {{$item->title}}
                    </p>
                    <p class='text-dark'>Qty:</p>
                    <input style="width:80px; height:25px;" type="number" name="prod_qty[{{$item->title}}]" min="1" value="1" class="form-control ml-2">
                    <input type="hidden" name="product_fee[{{$item->title}}]" value="{{$item->price}}">
                    <input type="hidden" name="prod_id[{{$item->title}}]" value="{{$item->id}}">
            </div>
        @endforeach
    </div>
    <div class=" col-lg-12 mt-5">
        <fieldset>
            <button name="submit" type="submit" id="form-submit" class="main-button-icon" disabled>Make A Reservation</button>
        </fieldset>
    </div>
</form>

<script>
// 初始化检查状态
checkCheckboxStatus();

// 给所有复选框绑定change事件
$('.products').on('change', checkCheckboxStatus);

function checkCheckboxStatus() {
    // 检查是否有至少一个复选框被勾选
    const hasChecked = $('.products:checked').length > 0;
    const submitBtn = $('#form-submit');
    const errorMsg = $('#checkbox-error');

    if (hasChecked) {
        submitBtn.prop('disabled', false);
        errorMsg.hide();
    } else {
        submitBtn.prop('disabled', true);
        errorMsg.show();
    }
}
</script>

原脚本错误说明 #

1. 拼写错误：$('.products').lenght应为$('.products').length
2. 选择器错误：$('product' + i)无法正确选中元素，直接用:checked伪类统计已勾选数量更简洁
3. 事件绑定问题：原代码用onClick属性绑定，改用jQuery的on('change')更可靠，同时初始化时就执行一次检查，确保页面加载时按钮状态正确
4. 多余参数：checkTest(xyz)中的xyz未使用，直接删除即可

后端验证（必须添加） #

前端验证可被绕过，必须在控制器中添加后端验证兜底，确保提交的prod_name数组至少有一个元素，同时修复控制器中的变量赋值错误：

public function reservation(Request $request)
{
    if(Auth::id()){
        // 添加后端验证规则
        $request->validate([
            'prod_name' => 'required|array|min:1',
            'prod_name.*' => 'string',
            // 其他字段验证规则，根据需求补充
            'name' => 'required|string',
            'email' => 'required|email',
            'phone' => 'required|string',
            // ... 其他字段
        ]);

        $user_id = Auth::id();
        $checked_array = $request->input('prod_name', []);
        $quantities = $request->input('prod_qty', []);
        $fees = $request->input('product_fee', []);
        $productid = $request->input('prod_id', []);

        foreach($checked_array as $value){
            $data = new Reservation; // 类名首字母大写，符合Laravel规范
            $data->user_id = $user_id;
            $data->name = $request->name;
            $data->email = $request->email;
            $data->phone = $request->phone;
            $data->address = $request->address;
            $data->date = $request->date;
            $data->time = $request->time;
            $data->status = "pending";

            // 修复变量赋值错误，原写法$request->$reserved_qty是错误的
            $data->productz = $value;
            $data->reserved_qty = $quantities[$value];
            $data->product_fee = $fees[$value] * $quantities[$value];
            $data->prod_id = $productid[$value];

            $data->save();
        }

        return redirect()->back()->with('success', '预约提交成功');
    }else{
        return redirect('/login');
    }
}

控制器代码修复说明 #

1. 添加了prod_name的验证规则，确保数组非空
2. 修正了类名：new reservation应为new Reservation（Laravel模型类名首字母大写）
3. 修复了变量赋值错误：原代码中$request->$reserved_qty这种写法会解析为变量变量，直接使用数组取值即可
4. 添加了成功跳转提示，提升用户体验

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