質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.11%

Laravel5でのAjaxでPOSTするときのValidation

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 410

osamuya

score 249

お世話になります。
Laravel5でのAjaxでPOSTするときのValidationの挙動についておしえてください。
Ajaxで値をPOSTすることはすでに可能になっているのですが、適切なバリデーションエラーのメッセージが返ってこない状態です。
特に特別なことは何もやっていないので、非常にシンプルなものになります。
バリデーションを正常に通過した際にはStatus200で返り値が正常に返ってきますが、バリデーションに引っかかった際にStatus422の場合に設定したバリデーションメッセージがjsonで返ってきません。(HTMLのソースは今回省略しています。それぞれのname属性の値がdata:以下に格納されています)

Ajax内のcatchでの返り値の拾い方が悪いのか、laravel側でのレスポンスの返し方が悪いのかイマイチわかっておりません。
知見ある方のアドバイスいただきたいと考えています。よろしくお願いします。

const endpoint_url = '/v2/fe_test/store';
new Vue({
  el: '#ln_form',
  data: {
    ln_email: '',
    ln_password: '',
    ln_textarea: '',
  },
  methods: {
    ln_submit: function() {
      let re = axios.post(
        endpoint_url,
        {
          email: this.ln_email,
          password: this.ln_password,
        },
        {
          headers: {
            'ContentType': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        }).then(
        response => {
          console.log(response.status);
          console.log(response.statusText);
          console.log(response.data);
        }).catch(function(){
      console.log(response.status);
          console.log(response.statusText);
          console.log(response.data);
        });
    }
  }
});
public function store(Request $request)
{

  $info = [
    'email' => $request->input('email'),
    'password' => $request->input('password'),
  ];
  $request->validate([
      'email' => 'required|email',
      'password' => 'required|min:4',
  ]);

  return response()->json($info);
}

おそらく422の場合もフォームバリデーション関連で自動的にリダイレクトがかかっているのでしょうか。
https://qiita.com/junsan50/items/ec7f810decd3b82d3d76

jQueryでのAjaxではtypeをjsonにすることでレスポンスのエラーメッセージを取得できましたが、Vueでやると422のステータスは返ってきますが肝心のエラーメッセージがjsonで取得できないといったところです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

catchで以下のように例外を取得するとエラーメッセージが取得できました。

data:
 errors:
 email: ["Emailアドレスを入力してください。"]
 password: ["パスワードを入力してください。"]


こういったかたちで格納されていました。

methods: {
  ln_submit: function() {
    let re = axios.post(
      endpoint_url,
      {
        email: this.ln_email,
        password: this.ln_password,
      },
      {
        headers: {
          'ContentType': 'application/json',
          'X-Requested-With': 'XMLHttpRequest',
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      }).then(response => {
        var text = this.ln_textarea.trim();
        console.log(text);
        if (text) {
          this.submitSet.push({ text: text });
        }
      }).catch(error => {
        if (error.response) {
          console.log(error.response);
        }
      });
  },
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる