Laravel 5.8+Yajra Datatable表单验证失败后如何回显旧值

一、修正表单提交控制器逻辑 #

在表单提交处理方法中，验证失败时需重定向回表单页面，同时携带错误信息与旧输入数据：

/* 获取membership ID数组 */
$membershipIDs = $request->membership_id;
$validate_array = [];

/* 循环生成验证规则 */
for($i = 0; $i < count($membershipIDs); $i++)
{
    $validate_array['amount.'. $i] = 'sometimes|nullable|numeric|gte:0';
}

$validator = Validator::make($request->all(), $validate_array);

if ($validator->fails())
{
    // 重定向回表单页面，携带错误信息与旧输入
    return redirect()->route('my_route', ['id' => $request->id])
        ->withErrors($validator)
        ->withInput();
}
else
{
    // 验证通过后的业务处理逻辑
    // ...
}

也可直接使用$this->validate方法，它会自动完成失败重定向：

$this->validate($request, $validate_array);
// 验证通过后的业务处理逻辑

二、修改Datatable构建控制器逻辑 #

在生成动态表单的AJAX方法中，读取session中的旧输入数据与错误信息，为每个amount输入框赋值旧值并添加错误样式：

use Illuminate\Support\Facades\Session;

if (request()->ajax())
{
    // 从session获取旧的amount数组，默认空数组
    $oldAmounts = request()->old('amount', []);
    // 获取旧的membership_id数组，用于匹配输入索引
    $oldMembershipIDs = request()->old('membership_id', []);
    // 获取错误消息集合
    $errors = Session::get('errors', new \Illuminate\Support\MessageBag);

    return datatables()
            ->of($memberships)
            ->addIndexColumn()
            ->addColumn('amount', function($data) use ($oldAmounts, $oldMembershipIDs, $errors) {
                // 匹配当前membership对应的输入索引
                $index = array_search($data->id, $oldMembershipIDs);
                // 获取对应索引的旧值，无匹配则为空
                $oldValue = $index !== false && isset($oldAmounts[$index]) ? $oldAmounts[$index] : '';
                // 判断当前字段是否存在错误，添加对应样式
                $errorClass = $errors->has("amount.$index") ? 'is-invalid' : '';

                $link = '<input type="text" id="membership_id[]" name="membership_id[]" value="' . e($data->id) . '" style="width:100px" class="form-control">';
                // 赋值旧值并绑定错误样式
                $link .= '<input type="number" id="amount[]" name="amount[]" value="' . e($oldValue) . '" class="form-control ' . $errorClass . '">';
                // 添加字段级错误提示
                if ($errors->has("amount.$index")) {
                    $link .= '<div class="invalid-feedback">' . e($errors->first("amount.$index")) . '</div>';
                }
                return $link;
            })
            ->rawColumns(['amount'])
            ->make(true);
}

return view('my_blade', compact('memberships', 'id'));

注意：使用e()函数转义输出内容，避免XSS风险。

三、优化视图文件 #

1. 确保主ID输入框支持旧值回显：

<input type="text" id="id" name="id" value="{{ old('id', $id) }}">

2. 保留全局错误提示的同时，字段级错误提示已在Datatable中生成，用户可直观定位错误输入框。

四、确保AJAX请求携带Session信息 #

在Datatable的AJAX配置中，添加xhrFields确保session信息正常传递：

$('#my_datatable').DataTable({
    iDisplayLength: 100,
    serverSide: true,
    processing: true,
    ajax: {
        url: "{{ route('my_route', ['id' => $id]) }}",
        type: 'GET',
        xhrFields: {
            withCredentials: true
        }
    },
    columnDefs: [
        {className: "dt-center", targets: "_all"}
    ],
    columns: [
        {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false},
        {data: 'name', name: 'name'},
        {data: 'given_name', name: 'given_name'},
        {data: 'amount', name: 'amount'}
    ],
    order: [[1, 'desc']]
});

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