Laravel 表單 validator 以及錯誤訊息顯示

建立一個 form 其中包含一個 input field：

<form
    method="POST"
    action="">

<input type="text" id="item-amount" name="item-amount">

</form>

表單送出以後，會使用 controller 的 store() 來處理資料。這裡先驗證 item-amount 是否有輸入數值：

public function store(\Illuminate\Http\Request $request)
{
    $validator = Validator::make($request->all(), [
        'item-amount' => 'required',
    ];
}

若使用者沒有輸入資料時 $validator->failes() 會回傳 true：

if ($validator->fails()) {
    // 檢查發現錯誤
} else {
    // 資料都正確
}

---

在 HTML 中顯示錯誤訊息

由 Laravel Validator 中的說明，錯誤訊息會儲存在 session 中，並由 middleware 轉成 blade 變數，所以可直接加上是否有錯誤訊息的檢查語法：

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form
    method="POST"
    action="">

---

資料驗證條件

前面的 validator 只有驗證使用者是否有輸入資料，這裡在多加上一個條件：數量必須大於 0 (gt:0)：

$validator = Validator::make($request->all(), [
    'item-amount' => 'required|gt:0',
];

發現錯誤後，回到表單輸入頁面，並將錯誤訊息傳給 view：

if ($validator->fails()) {
    return Redirect::to('/path/to/form')
        ->withErrors($validator);
}

redirect 到表單頁面後，看到前端顯示錯誤提示：

---

自訂要顯示的錯誤訊息

上方的錯誤訊息是 Laravel 預設的，不過可以依照錯誤類型，自訂要顯示的錯誤訊息。

Validator:make() 的第 3 個參數，可用來針對不同的驗證條件，顯示不同的錯誤訊息：

$validator = Validator::make($request->all(), [
    'item-number' => 'required',
    'item-amount' => 'required|gt:0',
    'hu-id' => 'required',
    'location-id' => 'required',
], [
    // 給 '.required' 使用的訊息
    'item-amount.required' => '數量為必填欄位',

    // 給 'gt:0' 使用的錯誤訊息
    'item-amount.gt' => '數量必須大於 0',
]);

這樣錯誤訊息就會按照設定的來顯示：

---

在表單中標示錯誤的欄位

若輸入欄位很多，使用者可能需要花一些時間才能在網頁中找到輸入框。

為了讓使用者可以快速找到有問題的資料輸入欄位，可以在該欄位加上 CSS class，用來突顯欄位：

<input class="@error('item-amount') is-invalid @enderror"
    type="text" id="item-amount" name="item-amount">

這樣搭配 CSS 以後，就可以達到錯誤標示的效果：

---

備註：若需要在表單中，自動填入使用者輸入的數值，需要二個步驟：

• 將 input 傳給 view
• 透過 Laravel old() 來拉資料

if ($validator->fails()) {
    return Redirect::to('/path/to/form')
        ->withErrors($validator)

        // 將使用者輸入的資料一併傳過去
        ->withInput($request->input()); 
}

在 <input> 加上 value：

<input
    type="text"
    id="item-amount" 
    name="item-amount"

    value="{{ old('item-amount') }}" <!-- 帶入使用者填寫的資料 -->
>