validate form

app/Http/Controllers/FormController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\UploadFormRequest;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Log;
 
@@ -24,7 +25,7 @@ public function index()
      */
     public function create()
     {
-        //
+        return view('upload-form');
     }
 
     /**
@@ -33,9 +34,9 @@ public function create()
      * @param  \Illuminate\Http\Request  $request
      * @return \Illuminate\Http\Response
      */
-    public function store(Request $request)
+    public function store(UploadFormRequest $request)
     {
-        //
+        return view('upload-form');
     }
 
     /**

app/Http/Requests/UploadFormRequest.php

+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UploadFormRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'category' => ['required'],
+            'question' => ['required', 'mimes:pdf'],
+            'answer' => ['required', 'mimes:pdf'],
+            'name' => ['required'],
+            'fee' => ['required','integer'],
+            'level' => ['required'],
+            'time' => ['required', 'integer'],
+            'numberOfQuestion' => ['required', 'integer'],
+        ];
+    }
+    public function messages()
+    {
+        return [
+            'category.required' => 'Hãy chọn danh mục!',
+            'question.mimes' => 'chỉ có thể upload file pdf',
+            'answer.mimes' => 'chỉ có thể upload file pdf',
+            'name.required' => 'Hãy nhập tên đề thi',
+            'fee.required' => 'Hãy nhập phí thi',
+            'fee.integer' => 'Hãy nhập phí thi bằng một số',
+            'level.required' => 'Hãy chọn mức độ',
+            'time.required' => 'Hãy nhập thời gian thi',
+            'time.integer' => 'Hãy nhập số phút thi bằng số',
+            'numberOfQuestion.required' => 'Hãy nhập số câu hỏi',
+            'numberOfQuestion.integer' => 'Hãy nhập số câu hỏi bằng số',
+        ];
+    }
+}

resources/views/layout.blade.php

@@ -20,6 +20,11 @@
         href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
+
+    {{-- jquery --}}
+    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js">
+    </script>
     <title>Document</title>
 </head>
 

resources/views/test.blade.php

-<div class="col-2">
-    <label for="">Điền đáp án đúng:</label>
-</div>
-<div class="col-5" style="overflow:scroll">
-    <div class="rows">
-        <div class="col-12">
-            <b id="countAnswer"> / {{ request('numberOfQuestion') }}</b>
-        </div>
-    </div>
-    @for ($i = 1; $i <= request('numberOfQuestion'); $i++)
-        <ul>
-            <li>
-                <b>{{ $i }}</b>
-                A.
-                <input name="{{ $i }}" class="radio" id="A{{ $i }}" type="radio" value="A"
-                    onclick="handleClick(this)" />
-                B.
-                <input name="{{ $i }}" class="radio" id="B{{ $i }}" type="radio" value="B"
-                    onclick="handleClick(this)" />
-                C.
-                <input name="{{ $i }}" class="radio" id="C{{ $i }}" type="radio" value="C"
-                    onclick="handleClick(this)" />
-                D.
-                <input name="{{ $i }}" class="radio" id="D{{ $i }}" type="radio" value="D"
-                    onclick="handleClick(this)" />
-            </li>
-        </ul>
-    @endfor
-</div>

resources/views/upload-form.blade.php

@@ -7,13 +7,15 @@
         </div>
     </nav>
     <div class="container">
-        <form action="">
+        <form action="{{ route('upload') }}" method="post" enctype="multipart/form" id="uploadForm">
+            @csrf
             <div class="row">
                 <div class="col-2">
                     <label for="">Danh mục:</label>
                 </div>
                 <div class="col-10">
-                    <select name="category" class="form-control">
+                    <select name="category" class="form-control @error('category') is-invalid @enderror" required>
+                        <option value="">--Chọn danh mục--</option>
                         <option value="1">danh mục 1</option>
                         <option value="2">danh mục 2</option>
                         <option value="3">danh mục 3</option>
@@ -21,6 +23,11 @@
                         <option value="5">danh mục 5</option>
                     </select>
                 </div>
+                @error('category')
+                    <div class="alert alert-danger" role="alert">
+                        {{ $message }}
+                    </div>
+                @enderror
             </div>
 
             <div class="row">
@@ -29,22 +36,34 @@
                 </div>
                 <div class="col-2">
                     <label class="file" for="question">Chọn file</label>
-                    <input type="file" name="question" id="question" hidden />
+                    <input type="file" name="question" class="@error('question') is-invalid @enderror" id="question"
+                        hidden />
                 </div>
                 <div class="col-8">
                     <p class="file">(Chỉ chọn file PDF)</p>
                 </div>
+                @error('question')
+                    <div class="alert alert-danger" role="alert">
+                        {{ $message }}
+                    </div>
+                @enderror
 
                 <div class="col-2">
                     <label for="">Tệp lời giải:</label>
                 </div>
                 <div class="col-2">
                     <label class="file" for="answer">Chọn file</label>
-                    <input type="file" name="answer" id="answer" hidden />
+                    <input type="file" name="answer" class="@error('answer') is-invalid @enderror" id="answer"
+                        hidden />
                 </div>
                 <div class="col-8">
                     <p class="file">(Chỉ chọn file PDF)</p>
                 </div>
+                @error('answer')
+                    <div class="alert alert-danger" role="alert">
+                        {{ $message }}
+                    </div>
+                @enderror
             </div>
 
             <div class="row">
@@ -52,14 +71,20 @@
                     <label for="">Tên đề thi:</label>
                 </div>
                 <div class="col-10">
-                    <input type="text" id="name" name="name" class="form-control" />
+                    <input type="text" id="name" name="name" value="{{ old('name') }}"
+                        class="form-control @error('name') is-invalid @enderror" required />
                 </div>
+                @error('name')
+                    <div class="alert alert-danger" role="alert">
+                        {{ $message }}
+                    </div>
+                @enderror
 
                 <div class="col-2">
                     <label for="">Giới thiệu:</label>
                 </div>
                 <div class="col-10">
-                    <textarea style="height:100px ;" name="introduction" class="form-control"></textarea>
+                    <textarea style="height:100px ;" name="introduction" class="form-control" value="{{ old('introduction') }}"></textarea>
                 </div>
 
                 <div class="col-2">
@@ -67,7 +92,7 @@
                 </div>
                 <div class="col-10">
                     <input type="text" name="keyWord" class="form-control" data-role="tagsinput"
-                        placeholder="+ Thêm từ khóa" />
+                        value="{{ old('keyWord') }}" placeholder="+ Thêm từ khóa" />
                 </div>
             </div>
 
@@ -76,34 +101,59 @@
                     <label for="">Phí thi:</label>
                 </div>
                 <div class="col-10">
-                    <input type="text" id="fee" name="fee" class="form-control" placeholder="đ" />
+                    <input type="text" id="fee" name="fee" value="{{ old('fee') }}"
+                        class="form-control @error('fee') is-invalid @enderror" placeholder="đ" required />
+                </div>
+                @error('fee')
+                    <div class="alert alert-danger" role="alert">
+                        {{ $message }}
                     </div>
+                @enderror
+
 
                 <div class="col-2">
                     <label for="">Mức độ:</label>
                 </div>
                 <div class="col-10">
-                    <select name="level" id="level" class="form-control">
-                        <option value="0">--Chọn mức độ--</option>
+                    <select name="level" id="level" class="form-control @error('level') is-invalid @enderror"
+                        required>
+                        <option value="">--Chọn mức độ--</option>
                         <option value="1">Dễ</option>
                         <option value="2">Khó</option>
                     </select>
                 </div>
+                @error('level')
+                    <div class="alert alert-danger" role="alert">
+                        {{ $message }}
+                    </div>
+                @enderror
 
                 <div class="col-2">
                     <label for="">Thời gian thi:</label>
                 </div>
                 <div class="col-10">
-                    <input type="number" id="time" name="time" class="form-control" placeholder="phút" />
+                    <input type="number" min="0" id="time" name="time" value="{{ old('time') }}"
+                        class="form-control @error('time') is-invalid @enderror" placeholder="phút" required />
+                </div>
+                @error('time')
+                    <div class="alert alert-danger" role="alert">
+                        {{ $message }}
                     </div>
+                @enderror
 
                 <div class="col-2">
                     <label for="">Số câu hỏi:</label>
                 </div>
                 <div class="col-10">
-                    <input type="number" name="numberOfQuestion" id="numberOfQuestion" class="form-control"
-                        placeholder="câu" />
+                    <input type="number" min="0" name="numberOfQuestion" id="numberOfQuestion"
+                        value="{{ old('numberOfQuestion') }}"
+                        class="form-control @error('numberOfQuestion') is-invalid @enderror" placeholder="câu" required />
+                </div>
+                @error('numberOfQuestion')
+                    <div class="alert alert-danger" role="alert">
+                        {{ $message }}
                     </div>
+                @enderror
             </div>
             <div class="row"id="questionForm">
 
@@ -127,6 +177,58 @@
                     }
                 });
             });
+
+            //check file type 
+            $("#question,#answer").change(function() {
+                var fileExtension = ['pdf'];
+                if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
+                    alert("Chỉ có thể chọn file " + fileExtension.join(', '));
+                }
+            });
+
+            //validate form
+            $("#uploadForm").validate({
+                rules: {
+                    category: "required",
+                    name: "required",
+                    fee: {
+                        required: true,
+                        number: true,
+                        min: 2
+                    }
+                    level: "required",
+                    numberOfQuestion: {
+                        required: true,
+                        number: true,
+                        min: 2
+                    },
+                    time: {
+                        required: true,
+                        number: true,
+                        min: 2
+                    },
+                },
+                messages: {
+                    category: 'Hãy chọn danh mục!',
+                    name: 'Hãy nhập tên đề thi',
+                    fee: {
+                        required: 'Hãy nhập phí thi',
+                        number: 'Hãy nhập phí thi bằng một số',
+                        min: 'Phí thi không được nhỏ hơn 0'
+                    },
+                    level: 'Hãy chọn mức độ',
+                    time: {
+                        required: 'Hãy nhập thời gian thi',
+                        number: 'Hãy nhập thời gian thi bằng một số',
+                        min: 'Thời gian thi không được nhỏ hơn 0'
+                    },
+                    numberOfQuestion: {
+                        required: 'Hãy nhập số câu hỏi',
+                        number: 'Hãy nhập số câu hỏi bằng một số',
+                        min: 'Số câu hỏi không được nhỏ hơn 0'
+                    },
+                }
+            });
         })
     </script>
 @endsection

routes/web.php

@@ -14,8 +14,8 @@
 |
 */
 
-Route::get('/', function () {
-    return view('upload-form');
-});
+Route::get('/',[FormController::class, 'create'])->name('uploadForm');
 
 Route::get('/questionForm', [FormController::class,'showQuestionForm'])->name('questionForm');
+
+Route::post('/upload',[FormController::class,'store'])->name('upload');