Udemyのオススメ講座はこちら 詳細を見てみる

TypeScript+Next.js+Laravelで簡易的なメモアプリ開発ハンズオン-5(バリデーションメッセージ表示)

  • URLをコピーしました!

この記事は「TypeScript+Next.js+Laravelで超簡易的なメモアプリ開発ハンズオン」の5回目です。

4回目ではメモ登録機能を実装し、このハンズオンで扱うメイン機能の実装が完了しました。

この記事ではLaravel APIから返却されたバリデーションメッセージをフロントエンド(Next.js)で表示していきます。

また、バリデーションエラーのレスポンスのステータスコードは422システムエラーのステータスコードは500なのでそれぞれのエラーをハンドリングできるような実装にしていきます。

修正するのはバリデーションメッセージを表示するフロントエンド側のコードのみです。

なお、バリデーションメッセージの表示が必要な画面はログイン画面とメモ登録画面なのでどちらも実装していきます。(方法は全く同じです)

目次

はじめに

本ハンズオンの全回分の買い切りはこちらに準備しております↓

ログイン画面

現状、ログイン画面でメールアドレス、パスワードともに空の状態でログインしようとすると、Laravelからバリデーションエラーが返ってきますが画面には何も表示されません。

バリデーションエラー時のログイン画面
{
    "message": "The given data was invalid.",
    "errors": {
        "email": [
            "必須入力です。"
        ],
        "password": [
            "必須入力です。"
        ]
    }
}

画面にバリデーションメッセージが表示されるように実装していきます。

Udemyのオススメ講座はこちら↓

TypeScript+Next.js+Laravelハンズオンはこちら↓

デスク周りのオススメアイテムはこちら↓

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

ブログを開設するなら「SWELL」が絶対オススメ!

この記事を書いた人

大学院(機械工学)→重工業→エンジニア→プロダクトマネージャー(PdM)兼エンジニア

神戸で「つながる勉強会」を運営↓
https://tsunagaru-kobe.connpass.com/

神戸グルメのインスタアカウントを運用しています。

目次