Q&A
Ajax通信処理はどこにも書いていないようですが。 >POST通信をAjaxで行なっているから？
現在LaravelでCRUDを製作しています。
モーダルで新規作成を行なっているのですが、Laravelのバリデーションを使って、入力していない状態でリダイレクトさせることはできたのですが、エラー文をモーダルに表示させることができません。
##問題点？
POST通信をAjaxで行なっているから？
bootstrapのモーダルを使っているから？
##コード
php
1//HomeController.php 2//一部抜粋 3 public function store(Request $request) { 4 $this->validate($request,[ 5 'title' => 'required', 6 'body' => 'required', 7 ],[ 8 'title' => 'error', 9 'body' => 'erroe', 10 ]); 11 12 $article = new Article; 13 $article->title = $request->title; 14 $article->body = $request->body; 15 $article->save(); 16 17 return view('store'); 18 }
php
1//top.blade.php 2 @extends('layouts.app') 3 4 @section('content') 5 <!doctype html> 6 <html lang="ja"> 7 <head> 8 <title>TOP</title> 9 <meta charset="utf-8"> 10 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 11 <meta name="viewport" content="width=device-width, initial-scale=1"> 12 <meta name="csrf-token" content="" /> 13 <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> --> 14 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 15 <script type="text/javascript" src="js/post.js"></script> 16 <title>Top</title> 17 18 <!-- Fonts --> 19 <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> 20 </head> 21 <h1>A table</h1> 22 <button type="button" class="btn btn-primary create_btn" data-toggle="modal" data-target="#createModal">New addition</button> 23 @foreach ($articles as $article) 24 <div class="card mb-2"> 25 <div class="card-body"> 26 <h4 class="card-title">{{ $article->title }}</h4> 27 <h6 class="card-subtitle mb-2 text-muted">{{ $article->updated_at }}</h6> 28 <p class="card-text">{{ $article->body }}</p> 29 <button type="button" class="btn btn-primary delete_btn" data-toggle="modal" data-target="#deleteModal" value="{{ $article->id }}">Delete</button> 30 </div> 31 </div> 32 @endforeach 33 34//新規作成モーダル部分 35 <!-- CreateModal --> 36 <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true"> 37 <div class="modal-dialog" role="document"> 38 <div class="modal-content"> 39 <div class="modal-header"> 40 <h5 class="modal-title" id="createModalLabel">CreateArticle</h5> 41 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 42 <span aria-hidden="true">×</span> 43 </button> 44 </div> 45 46 <form method="post" action="/create" id="createform"> 47 {{ csrf_field() }} 48 <div class="modal-body"> 49 <h2>Title</h2> 50 <input type="textbox" class="form-control" id="titleInput" name="title" > 51 <h2>Body</h2> 52 <textarea class="form-control" id="bodyInput" rows="3" name="body"></textarea> 53 </div> 54 <div class="modal-footer"> 55 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 56 <!-- <button type="submit" class="btn btn-primary">Create</button> --> 57 <button type="submit" class="btn btn-primary" id="create_btn">Create</button> 58 </form> 59 </div> 60 </div> 61 </div> 62</div> 63</html> 64 @endsection 65
php
1//web.php 2<?php 3 4Auth::routes(); 5 6Route::get('/', 'IndexController@index'); 7Route::get('/home', 'HomeController@index')->name('home'); 8Route::get('/top', 'HomeController@top'); 9Route::post('/top', 'HomeController@delete'); 10Route::post('/create', 'HomeController@store'); 11
js
1//post.js 2validateのoption作成 3 var Valids = { 4 //入力欄別にルールを作成 5 rules:{ 6 title:{ 7 required:true 8 }, 9 body:{ 10 required:true 11 }, 12 }, 13 } 14$(function(){ 15 /** 16 * 送信ボタンクリック 17 */ 18 $('#create_btn').click(function() { 19 //validate実行（作成したvalidateのoptionを指定） 20 $("#createform").validate(Valids); 21 //失敗で戻る 22 if (!$("#createform").valid()) { 23 return false; 24 }; 25 /** 26 * Ajax通信メソッド 27 * @param type : HTTP通信の種類 28 * @param url : リクエスト送信先のURL 29 * @param data : サーバに送信する値 30 */ 31 $.ajax({ 32 type: "POST", 33 url: "delete.blade.php", 34 data: { 35 "title" : $("#titleInput").val(), 36 "body" : $("#bodyInput").val() 37 } 38 }).done(function(data, dataType) { 39 // successのブロック内は、Ajax通信が成功した場合に呼び出される 40 41 42 }).fail(function(XMLHttpRequest, textStatus, errorThrown) { 43 // 通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、単純に通信に失敗した際の処理を記述します。 44 45 // エラーメッセージの表示 46 alert('Error : Please enter letters'); 47 }); 48 // サブミット(送信)後、ページをリロードしないようにする 49 return false; 50 }); 51});
すいません。エラーが出てたので、コメントアウトしていたのを忘れていました。
「エラーがでているから？」という観点ではどうでしょうか。JavaScriptはエラーがあればおおよそそれ以降の処理は行われませんし
SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'title' cannot be null (SQL: insert into `articles` (`title`, `body`, `updated_at`, `created_at`) values (, , 2018-07-05 02:59:45, 2018-07-05 02:59:45))こんなエラーが出るんで、多分ajax通ってないんですかね？
どのように解決されたのでしょうか？ https://teratail.com/help/question-tips#questionTips4-2 > あなたがどのアドバイスを元に、どのように解決できたのかをお礼とともに伝えましょう。
回答1件
0
ベストアンサー
リクエストの受け取り方が違うのではないでしょうか。
php
1 public function store(Request $request) 2 { 3 $name = $request->input('name'); 4 }
投稿2018/07/05 03:11
総合スコア80850
SQLSTATE[HY000]: General error: 1364 Field 'title' doesn't have a default value
ありがとうとございます！
nullではなくしっかりとしたエラー文が帰ってくるようになりました！
前にどこか書いたかもしれませんが、マニュアル見てください。自分勝手なやり方ではフレームワークも何も意味がなくなってしまいます。
NOT NULLフィールドにNULL入れようとしてるような記述なので、渡っていないことには変わりないですけどね。
まあ・・・type=textbox なんてinputは存在しないわけですが。
Formファサード入れたほうがいいのでは？
https://qiita.com/Frog_woman/items/1fb35cf46181b6b7d3be
あとajaxで処理させてsubmitしないのであれば、form使う必要ないですよ。
IDでvalueとってるのでどのformの入力コントロールとか関係ないわけですし。
あなたの回答
tips
プレビュー
