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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1297閲覧

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

osamuya

総合スコア241

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2019/03/17 06:48

編集2019/03/18 13:35

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

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

JS(vue

1const endpoint_url = '/v2/fe_test/store'; 2new Vue({ 3 el: '#ln_form', 4 data: { 5 ln_email: '', 6 ln_password: '', 7 ln_textarea: '', 8 }, 9 methods: { 10 ln_submit: function() { 11 let re = axios.post( 12 endpoint_url, 13 { 14 email: this.ln_email, 15 password: this.ln_password, 16 }, 17 { 18 headers: { 19 'ContentType': 'application/json', 20 'X-Requested-With': 'XMLHttpRequest', 21 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 22 } 23 }).then( 24 response => { 25 console.log(response.status); 26 console.log(response.statusText); 27 console.log(response.data); 28 }).catch(function(){ 29      console.log(response.status); 30 console.log(response.statusText); 31 console.log(response.data); 32 }); 33 } 34 } 35});

PHP

1public function store(Request $request) 2{ 3 4 $info = [ 5 'email' => $request->input('email'), 6 'password' => $request->input('password'), 7 ]; 8 $request->validate([ 9 'email' => 'required|email', 10 'password' => 'required|min:4', 11 ]); 12 13 return response()->json($info); 14}

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

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

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

Vue

1methods: { 2 ln_submit: function() { 3 let re = axios.post( 4 endpoint_url, 5 { 6 email: this.ln_email, 7 password: this.ln_password, 8 }, 9 { 10 headers: { 11 'ContentType': 'application/json', 12 'X-Requested-With': 'XMLHttpRequest', 13 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 14 } 15 }).then(response => { 16 var text = this.ln_textarea.trim(); 17 console.log(text); 18 if (text) { 19 this.submitSet.push({ text: text }); 20 } 21 }).catch(error => { 22 if (error.response) { 23 console.log(error.response); 24 } 25 }); 26 }, 27}

投稿2019/03/18 13:56

osamuya

総合スコア241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問