実現したいこと
学校の授業を登録するシステムで授業名等で登録時に
バリデーションを使用してユーザーが誤った情報をDBに保存されないようにする。
発生している問題・分からないこと
バリデーションを追加し、エラーを吐くような形で実装したが
エラーメッセージは表示されない。
ただ、エラーは出ている。（理由：エラーがない場合は画面遷移するが、今回はしていない）
エラーメッセージ
error
1サムネイルと授業名だけを入力したときに表示される。下記画像添付 2
該当のソースコード
CurriculumsRequest.php
1<?php 2 3namespace App\Http\Requests; 4 5use Illuminate\Foundation\Http\FormRequest; 6 7class CurriculumsRequest extends FormRequest 8{ 9 public function authorize() 10 { 11 return true; 12 } 13 14 public function rules() 15 { 16 return [ 17 'title' =>'required|max:255', 18 'description'=>'max:2000', 19 'thumbnail_image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048', 20 21 ]; 22 } 23 public function messages() 24 { 25 return [ 26 'title.required' => '授業名は必須項目です。', 27 'title.max' => '授業名は255文字以内で入力してください。', 28 'description.max' => '授業概要は2000文字以内で入力してください。', 29 'thumbnail_image.image' => '商品画像は画像ファイルを選択してください。', 30 'thumbnail_image.mimes' => '商品画像はjpeg、png、jpg、gif形式の画像ファイルを選択してください。', 31 'thumbnail_image.max' => '商品画像のサイズは2MB以下にしてください。', 32 ]; 33 } 34} 35
CurriculumController
1public function store(CurriculumsRequest $request) 2 { 3 if (!$request->hasFile('thumbnail_image')) { 4 return '<h1>Thumbnail must be uploaded</h1>'; 5 } 6 7 $file = $request->file('thumbnail_image'); 8 9 if ($file->isValid()) { 10 $data = $this->getCurriculumData($request); 11 $data['thumbnail'] = $file->getClientOriginalName(); 12 $curriculum = Curriculum::create($data); 13 Storage::disk('public')->putFileAs('uploads/' . $curriculum->id, $file, $curriculum->thumbnail); 14 } else { 15 return '<h1>Thumbnail is invalid</h1>'; 16 } 17 return redirect()->route('curriculums.list.default'); 18 } 19private function getCurriculumData(CurriculumsRequest $request) { 20 return [ 21 'title' => $request->input('title'), 22 'description' => $request->input('description'), 23 'video_url' => $request->input('video_url'), 24 'always_delivery_flg' => $request->input('always_delivery_flg', 0), 25 'grade_id' => $request->input('grade_id'), 26 ]; 27 }
form.blade.php
1{{-- 2このform.blade.phpは、授業登録と、授業編集の両方で利用します。 3最初にform.blade.phpが登録で利用されているのか、編集で利用されているのか判定し、 4<input>にどのような値をあてはめるか決めています。 5--}} 6 7@php 8 // CurriculumControllerから渡された$curriculumがnullの場合は、『登録』とみなす。 9 $is_edit = $curriculum != null; 10 11 // 共通の変数に、登録の場合と編集の場合で異なる値をいれていく。 12 if ($is_edit) { 13 $title = $curriculum->title; 14 $video_url = $curriculum->video_url; 15 $description = $curriculum->description; 16 $always_delivery = $curriculum->always_delivery_flg ? 'checked' : ''; 17 18 $action = route('curriculums.update', [ 'id' => $curriculum->id ]); 19 $method = 'PUT'; 20 } else { 21 $title = ''; 22 $video_url = ''; 23 $description = ''; 24 $always_delivery = ''; 25 26 $action = route('curriculums.store'); 27 $method = 'POST'; 28 } 29@endphp 30 31<!DOCTYPE html> 32<html lang="ja" translate="no"> 33<head> 34 <meta charset="UTF-8"> 35 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 36 <link rel="stylesheet" href="{{ asset('css/app.css') }}"> 37 <link rel="stylesheet" href="{{ asset('css/curriculums/form.css') }}"> 38 <link rel="stylesheet" href="{{ asset('css/reset.css') }}"> 39 <title>授業設定</title> 40</head> 41<body> 42 @include('admin_header') <!-- 共通ヘッダーをインクルード --> 43 44 <div class="wrapper"> 45 46 <div class="header"> 47 <!-- 戻るボタンを押すと管理-授業一覧へ戻る形にしたい --> 48 <a class="header__back" href="{{ route('curriculums.list.default') }}">←戻る</a> 49 <h1 class="header__title">授業設定</h1> 50 </div> 51 52 <div class="content"> 53 54 <!-- 授業の詳細を書き込んでいくためのフォーム --> 55 <form action="{{ $action }}" method="POST" enctype="multipart/form-data" class="curriculum-form"> 56 @csrf 57 @if ($errors->any()) 58 <div class="alert alert-danger"> 59 <ul> 60 @foreach ($errors->all() as $error) 61 <li>{{ $error }}</li> 62 @endforeach 63 </ul> 64 </div> 65 @endif 66 @if ($is_edit) {{-- 編集の場合は、@method('PUT')を指定--}} 67 @method('PUT') 68 @endif 69 70 <!-- サムネイル変更のための箇所。プレビュー画面と、ファイル選択の<input>フィールドを用意 --> 71 <div class="curriculum-form__thumbnail-editor"> 72 <div class="preview-area"> 73 <img id="thumbnail-preview" src="{{ $is_edit ? $curriculum->getThumbnailUrl() : asset('img/noimage.jpg') }}" alt="no image" width="100%"> 74 </div> 75 <div class="curriculum-form__field curriculum-form__field--thumbnail"> 76 <label for="thumbnail_image">サムネイル</label> 77 <input type="file" name="thumbnail_image" id="thumbnail_image" accept="image/*"> 78 </div> 79 </div> 80 81 <!-- 学年のセレクトボックス --> 82 <div class="curriculum-form__field"> 83 <label for="grade_id">学年</label> 84 <select name="grade_id" id="grade_id" class="border"> 85 @foreach ($grades as $grade) 86 {{-- 編集の場合は、$curriculumに現在指定されている学年を初期値とする --}} 87 <option value="{{ $grade->id }}" {{ $is_edit && $curriculum->grade_id == $grade->id ? 'selected' : '' }}> 88 {{ $grade->name }} 89 </option> 90 @endforeach 91 </select> 92 </div> 93 94 <!-- 授業のテキストボックス --> 95 <div class="curriculum-form__field"> 96 <label for="title">授業名</label> 97 <input type="text" id="title" name="title" class="border" value="{{ $title }}"> <!-- form.blade.phpでセットした値を初期値にする。登録の場合と、編集の場合で変わる --> 98 </div> 99 100 <!-- 動画URLのテキストボックス --> 101 <div class="curriculum-form__field"> 102 <label for="video_url">動画URL</label> 103 <input type="text" id="video_url" name="video_url" class="border" value="{{ $video_url }}"> 104 </div> 105 106 <!-- 授業概要のテキストエリア --> 107 <div class="curriculum-form__field"> 108 <label for="description">授業概要</label> 109 <textarea id="description" name="description" rows="10" cols="50" class="border">{{ $description }}</textarea> 110 </div> 111 112 <!-- 常時公開のチェックボックス --> 113 <div class="curriculum-form__field curriculum-form__field--always-delivery"> 114 <input type="checkbox" id="always_delivery_flg" name="always_delivery_flg" value="1" {{ $always_delivery }}> 115 <label for="always_delivery_flg">常時公開</label> 116 </div> 117 118 <!-- 登録ボタン --> 119 <input type="submit" value="登録" class="form__register-btn bg-btn-secondary"> 120 </form> 121 </div> 122 </div> 123</body> 124 125<script type="module"> 126 import { previewOnUpload } from "{{ asset('js/curriculums/form.js') }}"; 127 128 // ファイルを選択したら、画像をプレビューするように、イベントリスナーをセット 129 previewOnUpload('#thumbnail-preview', 'input[name="thumbnail_image"]'); 130</script> 131</html> 132
試したこと・調べたこと
上記の詳細・結果
調べてみて、
jaフォルダを入れてみたが反応せず
補足
0 コメント