如何在同字段多表单场景下正确展示表单校验错误

问题根源是两个表单的email字段名称完全一致，Laravel的错误消息按字段名存储，导致一个表单提交出错时，所有同名字段都会触发错误提示。下面提供两种可行的解决方法：

方法一：给字段加唯一命名空间 #

给每个表单的email字段使用数组格式的名称，让它们在验证时被区分开：

第一个表单代码修改： #

<form action="{{ route('signup') }}" method="post" class="col-md-9" id="webinar-form-{{ $data->id }}-1">
    @csrf
    <div class="input-group mb-3">
        <input type="text" class="form-control @error('email.form1') is-invalid @enderror" name="email[form1]" value="{{ old('email.form1') }}" placeholder="Adres email">
        <button type="submit" class="btn btn-primary">Sign Up</button>
    </div>

    @error('email.form1')
        <div class="alert alert-light" role="alert">
            <span class="text-danger">{{ $message }}</span>
        </div>
    @enderror
</form>

第二个表单代码修改： #

<form action="{{ route('signup') }}" method="post" class="col-md-9" id="webinar-form-{{ $data->id }}-2">
    @csrf
    <div class="input-group mb-3">
        <input type="text" class="form-control @error('email.form2') is-invalid @enderror" name="email[form2]" value="{{ old('email.form2') }}" placeholder="Adres email">
        <button type="submit" class="btn btn-primary">Sign Up</button>
    </div>

    @error('email.form2')
        <div class="alert alert-light" role="alert">
            <span class="text-danger">{{ $message }}</span>
        </div>
    @enderror
</form>

控制器验证规则调整： #

使用sometimes规则，确保只验证提交过来的字段：

$request->validate([
    'email.form1' => 'sometimes|required|email',
    'email.form2' => 'sometimes|required|email',
]);

方法二：用错误袋区分表单 #

给每个表单添加唯一标识的隐藏字段，配合Laravel的错误袋功能，让错误消息和对应表单绑定：

第一个表单代码修改： #

<form action="{{ route('signup') }}" method="post" class="col-md-9" id="webinar-form-{{ $data->id }}-1">
    @csrf
    <input type="hidden" name="form_id" value="form1">
    <div class="input-group mb-3">
        <input type="text" class="form-control @error('email', 'form1') is-invalid @enderror" name="email" value="{{ old('email', null, 'form1') }}" placeholder="Adres email">
        <button type="submit" class="btn btn-primary">Sign Up</button>
    </div>

    @error('email', 'form1')
        <div class="alert alert-light" role="alert">
            <span class="text-danger">{{ $message }}</span>
        </div>
    @enderror
</form>

第二个表单代码修改： #

<form action="{{ route('signup') }}" method="post" class="col-md-9" id="webinar-form-{{ $data->id }}-2">
    @csrf
    <input type="hidden" name="form_id" value="form2">
    <div class="input-group mb-3">
        <input type="text" class="form-control @error('email', 'form2') is-invalid @enderror" name="email" value="{{ old('email', null, 'form2') }}" placeholder="Adres email">
        <button type="submit" class="btn btn-primary">Sign Up</button>
    </div>

    @error('email', 'form2')
        <div class="alert alert-light" role="alert">
            <span class="text-danger">{{ $message }}</span>
        </div>
    @enderror
</form>

控制器验证逻辑调整： #

use Illuminate\Support\Facades\Validator;

public function signup(Request $request)
{
    $formId = $request->input('form_id');
    
    $validator = Validator::make($request->all(), [
        'email' => 'required|email',
    ]);

    if ($validator->fails()) {
        return redirect()->back()
            ->withErrors($validator, $formId)
            ->withInput();
    }

    // 后续处理逻辑
}

注意事项 #

你原代码中两个表单的id属性完全相同，这会违反DOM唯一性规则，建议改成webinar-form-{{ $data->id }}-1和webinar-form-{{ $data->id }}-2这类唯一值。

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