From c15e08e7c51248aafb37c0cd9d48d930b39122a2 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Wed, 25 Dec 2024 07:52:19 +0700
Subject: [PATCH] Tambahkan validasi form untuk data debitur

- Menambahkan properti `id` pada elemen form untuk mempermudah manipulasi DOM.
- Menandai field wajib dengan tanda bintang (*) dan memastikan validasi untuk field yang diperlukan.
- Menambahkan script JavaScript untuk validasi input form secara dinamis, termasuk cek keberadaan data dan memberikan feedback error real-time.
- Menambahkan event listener untuk memastikan semua field tervalidasi sebelum pengiriman form.
---
 .../debitur/components/debitur.blade.php      | 167 ++++++++++++++++--
 1 file changed, 153 insertions(+), 14 deletions(-)

diff --git a/resources/views/debitur/components/debitur.blade.php b/resources/views/debitur/components/debitur.blade.php
index 157ad1b..c873210 100644
--- a/resources/views/debitur/components/debitur.blade.php
+++ b/resources/views/debitur/components/debitur.blade.php
@@ -1,12 +1,15 @@
-<form action="{{ isset($debitur->id) ? route('debitur.update', $debitur->id) : route('debitur.store') }}" method="POST" class="grid gap-5">
+<form action="{{ isset($debitur->id) ? route('debitur.update', $debitur->id) : route('debitur.store') }}" method="POST" id="debitur-form" class="grid gap-5">
     @if(isset($debitur->id))
         <input type="hidden" name="id" value="{{ $debitur->id }}">
         @method('PUT')
     @endif
     @csrf
     <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-        <label class="form-label max-w-56">
+        <label class="form-label max-w-56 gap-1">
             Cabang
+            <span class="text-danger">
+                *
+           </span>
         </label>
         <div class="flex flex-wrap items-baseline w-full">
             <select class="input tomselect w-full @error('branch_id') border-danger bg-danger-light @enderror" name="branch_id" id="branch_id">
@@ -26,11 +29,14 @@
         </div>
     </div>
     <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-        <label class="form-label max-w-56">
+        <label class="form-label max-w-56 gap-1">
             CIF
+            <span class="text-danger">
+                *
+           </span>
         </label>
         <div class="flex flex-wrap items-baseline w-full">
-            <input class="input  @error('cif') border-danger bg-danger-light @enderror" type="number" name="cif" value="{{ $debitur->cif ?? '0000000000' }}">
+            <input class="input  @error('cif') border-danger bg-danger-light @enderror" type="number" id="cif" name="cif" value="{{ $debitur->cif ?? '0000000000' }}">
             @error('cif')
             <em class="alert text-danger text-sm">{{ $message }}</em>
             @enderror
@@ -48,11 +54,14 @@
         </div>
     </div>
     <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-        <label class="form-label max-w-56">
+        <label class="form-label max-w-56 gap-1">
             Nama Debitur
+            <span class="text-danger">
+                *
+           </span>
         </label>
         <div class="flex flex-wrap items-baseline w-full">
-            <input class="input  @error('name') border-danger bg-danger-light @enderror" type="text" name="name" value="{{ $debitur->name ?? '' }}">
+            <input required class="input  @error('name') border-danger bg-danger-light @enderror" type="text" name="name" value="{{ $debitur->name ?? '' }}">
             @error('name')
             <em class="alert text-danger text-sm">{{ $message }}</em>
             @enderror
@@ -92,13 +101,16 @@
         </div>
     </div>
     <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-        <label class="form-label max-w-56">
+        <label class="form-label max-w-56 gap-1">
             Address
+            <span class="text-danger">
+                *
+           </span>
         </label>
         <div class="flex flex-wrap items-baseline w-full">
             <div class="flex flex-col lg:flex-row gap-2 w-full">
                 <div class="flex flex-wrap items-baseline w-full">
-                    <select id="province_code" name="province_code" class="select w-full @error('province_code') border-danger bg-danger-light @enderror">
+                    <select required id="province_code" name="province_code" class="select w-full @error('province_code') border-danger bg-danger-light @enderror">
                         <option value="">Select Province</option>
                         @foreach($provinces as $province)
                             @if(isset($debitur))
@@ -117,7 +129,7 @@
                     @enderror
                 </div>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <select id="city_code" name="city_code" class="select w-full @error('city_code') border-danger bg-danger-light @enderror">
+                    <select required id="city_code" name="city_code" class="select w-full @error('city_code') border-danger bg-danger-light @enderror">
                         <option value="">Select City</option>
                         @if(isset($cities))
                             @foreach($cities as $city)
@@ -141,7 +153,7 @@
             </div>
             <div class="flex flex-col lg:flex-row gap-2 w-full mt-2 lg:mt-5">
                 <div class="flex flex-wrap items-baseline w-full">
-                    <select id="district_code" name="district_code" class="select w-full @error('district_code') border-danger bg-danger-light @enderror">
+                    <select required id="district_code" name="district_code" class="select w-full @error('district_code') border-danger bg-danger-light @enderror">
                         <option value="">Select District</option>
                         @if(isset($districts))
                             @foreach($districts as $district)
@@ -163,7 +175,7 @@
                     @enderror
                 </div>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <select id="village_code" name="village_code" class="select w-full @error('district_code') border-danger bg-danger-light @enderror">
+                    <select required id="village_code" name="village_code" class="select w-full @error('district_code') border-danger bg-danger-light @enderror">
                         <option value="">Select Village</option>
                         @if(isset($villages))
                             @foreach($villages as $village)
@@ -185,14 +197,14 @@
                     @enderror
                 </div>
                 <div class="flex flex-wrap items-baseline w-full">
-                    <input class="input  @error('postal_code') border-danger bg-danger-light @enderror" type="number" id="postal_code" name="postal_code" value="{{ $debitur->postal_code ?? '' }}" placeholder="Postal Code">
+                    <input required class="input  @error('postal_code') border-danger bg-danger-light @enderror" type="number" id="postal_code" name="postal_code" value="{{ $debitur->postal_code ?? '' }}" placeholder="Postal Code">
                     @error('postal_code')
                     <em class="alert text-danger text-sm">{{ $message }}</em>
                     @enderror
                 </div>
             </div>
             <div class="flex flex-row w-full mt-2 lg:mt-5">
-                <textarea class="textarea  @error('address') border-danger bg-danger-light @enderror" rows="3" type="number" id="address" name="address">{{ $debitur->address ?? '' }}</textarea>
+                <textarea required class="textarea  @error('address') border-danger bg-danger-light @enderror" rows="3" id="address" name="address" placeholder="Alamat Lengkap">{{ $debitur->address ?? '' }}</textarea>
                 @error('address')
                 <em class="alert text-danger text-sm">{{ $message }}</em>
                 @enderror
@@ -200,8 +212,135 @@
         </div>
     </div>
     <div class="flex justify-end">
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary" id="submit">
             Save
         </button>
     </div>
 </form>
+@push('scripts')
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const form = document.getElementById('debitur-form');
+            const nameInput = form.querySelector('input[name="name"]');
+            const provinceSelect = form.querySelector('#province_code');
+            const citySelect = form.querySelector('#city_code');
+            const districtSelect = form.querySelector('#district_code');
+            const villageSelect = form.querySelector('#village_code');
+            const postalCodeInput = form.querySelector('#postal_code');
+            const addressTextarea = form.querySelector('#address');
+            const branchSelect = document.getElementById('branch_id');
+            const cifInput = document.getElementById('cif');
+            const submitButton = document.getElementById('submit');
+
+            function validateField(field, errorMessage) {
+                const value = field.value.trim();
+                if (value.length === 0) {
+                    field.classList.add('border-danger', 'bg-danger-light');
+                    const existingError = field.parentElement.querySelector('.alert.text-danger');
+                    if (!existingError) {
+                        const em = document.createElement('em');
+                        em.className = 'alert text-danger text-sm';
+                        em.textContent = errorMessage;
+                        field.parentElement.appendChild(em);
+                    }
+                    return false;
+                } else {
+                    field.classList.remove('border-danger', 'bg-danger-light');
+                    const existingError = field.parentElement.querySelector('.alert.text-danger');
+                    if (existingError) {
+                        existingError.remove();
+                    }
+                    return true;
+                }
+            }
+
+            function validateBranch() {
+                return validateField(branchSelect, 'Cabang is required');
+            }
+
+            function validateCIF() {
+                return validateField(cifInput, 'CIF is required');
+            }
+
+            function validateName() {
+                return validateField(nameInput, 'Nama Debitur is required');
+            }
+
+            function validateProvince() {
+                return validateField(provinceSelect, 'Province is required');
+            }
+
+            function validateCity() {
+                return validateField(citySelect, 'City is required');
+            }
+
+            function validateDistrict() {
+                return validateField(districtSelect, 'District is required');
+            }
+
+            function validateVillage() {
+                return validateField(villageSelect, 'Village is required');
+            }
+
+            function validatePostalCode() {
+                return validateField(postalCodeInput, 'Postal Code is required');
+            }
+
+            function validateAddress() {
+                return validateField(addressTextarea, 'Address is required');
+            }
+
+            nameInput.addEventListener('blur', validateName);
+            nameInput.addEventListener('input', validateName);
+            provinceSelect.addEventListener('change', validateProvince);
+            citySelect.addEventListener('change', validateCity);
+            districtSelect.addEventListener('change', validateDistrict);
+            villageSelect.addEventListener('change', validateVillage);
+            postalCodeInput.addEventListener('blur', validatePostalCode);
+            postalCodeInput.addEventListener('input', validatePostalCode);
+            addressTextarea.addEventListener('blur', validateAddress);
+            addressTextarea.addEventListener('input', validateAddress);
+            branchSelect.addEventListener('change', validateVillage);
+            cifInput.addEventListener('blur', validateCIF);
+            cifInput.addEventListener('input', validateName);
+
+            function validateAllFields() {
+                const isValid =
+                    validateBranch() &&
+                    validateCIF() &&
+                    validateName() &&
+                    validateProvince() &&
+                    validateCity() &&
+                    validateDistrict() &&
+                    validateVillage() &&
+                    validatePostalCode() &&
+                    validateAddress();
+
+                return isValid;
+            }
+
+            form.addEventListener('submit', function (event) {
+                const isValid =
+                    validateBranch() &&
+                    validateCIF() &&
+                    validateName() &&
+                    validateProvince() &&
+                    validateCity() &&
+                    validateDistrict() &&
+                    validateVillage() &&
+                    validatePostalCode() &&
+                    validateAddress();
+
+                if (!isValid) {
+                    event.preventDefault();
+                }
+            });
+
+            submitButton.addEventListener('click', function (event) {
+                if (!validateAllFields()) {
+                    event.preventDefault();
+                }
+            });
+        });
+    </script>
+@endpush