Merge branch 'feature/form-validation-fix' into 'upload-form-layout'

Feature/form validation fix

See merge request !6

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' => ['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.required' => 'Hãy chọn file câu hỏi',
+            '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,12 @@
         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/question-form.blade.php

@@ -12,38 +12,38 @@
             <li>
                 <b>{{ $i }}</b>
                 A.
-                <input name="{{ $i }}" id="A{{ $i }}" type="radio" value="A"
+                <input name="{{ $i }}" id="A{{ $i }}" type="radio" value="{{ old('value') ?? 1 }}"
                     onclick="handleClick(this)" />
                 B.
-                <input name="{{ $i }}" id="B{{ $i }}" type="radio" value="B"
+                <input name="{{ $i }}" id="B{{ $i }}" type="radio" value="{{ old('value') ?? 2 }}"
                     onclick="handleClick(this)" />
                 C.
-                <input name="{{ $i }}" id="C{{ $i }}" type="radio" value="C"
+                <input name="{{ $i }}" id="C{{ $i }}" type="radio" value="{{ old('value') ?? 3 }}"
                     onclick="handleClick(this)" />
                 D.
-                <input name="{{ $i }}" id="D{{ $i }}" type="radio" value="D"
-                    onclick="handleClick(this)" />
+                <input name="{{ $i }}" id="D{{ $i }}" type="radio"
+                    value="{{ old('value') ?? 4 }}" onclick="handleClick(this)" />
             </li>
         </ul>
     @endfor
 
 </div>
 <script>
-        var countAnswer = 0;
-        const array = [];
-
-        function handleClick(input) {
-            var name = input.name;
-            var number = {{ request('numberOfQuestion') ?? 0 }};
-            var i = number - name;
+    var countAnswer = 0;
+    const array = [];
 
-            if ($("input[name=" + name + "]").is(':checked') && jQuery.inArray(i, array) == -1) {
-                countAnswer += 1;
-                array.push(i);
-            } else if ($("input[name=" + name + "]").is(':checked') && jQuery.inArray(i, array) != -1) {
-                countAnswer += 0;
-            }
+    function handleClick(input) {
+        var name = input.name;
+        var number = {{ request('numberOfQuestion') ?? 0 }};
+        var i = number - name;
 
-            $("#countAnswer").html(countAnswer);
+        if ($("input[name=" + name + "]").is(':checked') && jQuery.inArray(i, array) == -1) {
+            countAnswer += 1;
+            array.push(i);
+        } else if ($("input[name=" + name + "]").is(':checked') && jQuery.inArray(i, array) != -1) {
+            countAnswer += 0;
         }
+
+        $("#countAnswer").html(countAnswer);
+    }
 </script>

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

@@ -105,7 +105,7 @@
                         placeholder="câu" />
                 </div>
             </div>
-            <div class="row"id="questionForm">
+            <div class="row" id="questionForm" name="questionForm">
 
             </div>
             <button class="btn btn-primary" type="submit" id="submitButton">Đăng ngay</button>
@@ -114,6 +114,18 @@
 
     <script>
         $(document).ready(function() {
+            if ($('#numberOfQuestion').val() != null) {
+                $.ajax({
+                    type: "GET",
+                    url: "{{ route('questionForm') }}",
+                    data: {
+                        numberOfQuestion: $('#numberOfQuestion').val()
+                    },
+                    success: function(data) {
+                        $("#questionForm").html(data);
+                    }
+                });
+            }
             //show question form
             $('#numberOfQuestion').change(function() {
                 $.ajax({
@@ -127,6 +139,14 @@
                     }
                 });
             });
+
+            //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(', '));
+                }
+            });
         })
     </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');