(validation): Tambahkan pattern validasi koordinat latitude dan longitude

Menambahkan pattern regex untuk validasi input koordinat geografis pada form surveyor untuk memastikan data yang dimasukkan memiliki format yang valid dan sesuai dengan rentang koordinat yang benar.

Perubahan yang dilakukan:

**File yang dimodifikasi:**
1. `Modules/Lpj/resources/views/surveyor/components/pembanding-tanah-bangunan-unit.blade.php`
   - Menambahkan pattern pada input latitude utama: `^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$`
   - Menambahkan pattern pada input longitude utama: `^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$`
   - Menambahkan pattern pada input latitude pembanding: `^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$`
   - Menambahkan pattern pada input longitude pembanding: `^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$`

2. `Modules/Lpj/resources/views/surveyor/components/pembanding-kendaraan.blade.php`
   - Menambahkan pattern pada input latitude utama: `^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$`
   - Menambahkan pattern pada input longitude utama: `^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$`
   - Menambahkan pattern pada input latitude pembanding: `^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$`
   - Menambahkan pattern pada input longitude pembanding: `^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$`

3. `Modules/Lpj/resources/views/surveyor/components/header.blade.php`
   - Menambahkan pattern pada input latitude: `^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$`
   - Menambahkan pattern pada input longitude: `^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$`
   - Memperbaiki duplikasi atribut `type="text"` pada input latitude

**Detail Pattern Validasi:**
- **Latitude**: Menerima nilai dari -90 sampai 90 derajat
  - Format: `-?([1-8]?\d(\.\d+)?|90(\.0+)?)`
  - Contoh valid: `-6.1234`, `0.123`, `90.0`, `-90.0`

- **Longitude**: Menerima nilai dari -180 sampai 180 derajat
  - Format: `-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)`
  - Contoh valid: `106.1234`, `0.123`, `180.0`, `-180.0`, `-106.1234`

**Manfaat:**
- Mencegah input koordinat yang tidak valid
- Standarisasi format data koordinat di seluruh form surveyor
- Memastikan data yang tersimpan memiliki presisi yang sesuai
- Meningkatkan akurasi data untuk keperluan pemetaan dan analisis lokasi

**Impact:**
- Validasi client-side akan menolak input koordinat yang tidak sesuai format
- Pesan error bawaan browser akan muncul jika format tidak valid
- Tidak ada perubahan pada logic backend (validasi tetap ada di server-side)
- Kompatibel dengan semua browser modern yang support HTML5 pattern
This commit is contained in:
Daeng Deni Mardaeni
2025-11-20 14:36:05 +07:00
parent 8c60320532
commit fc6f18fea9
3 changed files with 33 additions and 33 deletions

View File

@@ -257,11 +257,11 @@
<label class="form-label max-w-56">Koordinat</label> <label class="form-label max-w-56">Koordinat</label>
<div id="perwakilan" class="flex gap-5 items-baseline w-full"> <div id="perwakilan" class="flex gap-5 items-baseline w-full">
<div class="grid grid-cols-2 gap-4 items-center w-full"> <div class="grid grid-cols-2 gap-4 items-center w-full">
<input class="input" type="text" placeholder="Masukan Koordinat Latitude" type="text" <input class="input" type="text" placeholder="Masukan Koordinat Latitude"
name="kordinat_lat" id="lat" name="kordinat_lat" id="lat" pattern="^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$"
value="{{ old('kordinat_lat', isset($forminspeksi['asset']['kordinat_lat']) ? $forminspeksi['asset']['kordinat_lat'] : '') }}"> value="{{ old('kordinat_lat', isset($forminspeksi['asset']['kordinat_lat']) ? $forminspeksi['asset']['kordinat_lat'] : '') }}">
<input class="input" type="text" placeholder="Masukan Koordinat Longitude" <input class="input" type="text" placeholder="Masukan Koordinat Longitude"
name="kordinat_lng" id="lng" name="kordinat_lng" id="lng" pattern="^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$"
value="{{ old('kordinat_lng', isset($forminspeksi['asset']['kordinat_lng']) ? $forminspeksi['asset']['kordinat_lng'] : '') }}"> value="{{ old('kordinat_lng', isset($forminspeksi['asset']['kordinat_lng']) ? $forminspeksi['asset']['kordinat_lng'] : '') }}">
</div> </div>
<a onclick="getCoordinates()" type="button" class="btn btn-md btn-outline btn-primary"> <a onclick="getCoordinates()" type="button" class="btn btn-md btn-outline btn-primary">

View File

@@ -228,17 +228,17 @@
<td class="px-4 py-2"> <td class="px-4 py-2">
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
<input type="text" name="kordinat_lat" class="input" placeholder="Latitude" <input type="text" name="kordinat_lat" class="input" placeholder="Latitude"
value="{{ $inspectionData['kordinat_lat'] ?? '' }}"> value="{{ $inspectionData['kordinat_lat'] ?? '' }}" pattern="^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$">
<input type="text" name="kordinat_lng" class="input" placeholder="Longitude" <input type="text" name="kordinat_lng" class="input" placeholder="Longitude"
value="{{ $inspectionData['kordinat_lng'] ?? '' }}"> value="{{ $inspectionData['kordinat_lng'] ?? '' }}" pattern="^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$">
</div> </div>
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
<input type="text" name="kordinat_lat_pembanding[]" class="input" <input type="text" name="kordinat_lat_pembanding[]" class="input"
placeholder="Latitude"> placeholder="Latitude" pattern="^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$">
<input type="text" name="kordinat_lng_pembanding[]" class="input" <input type="text" name="kordinat_lng_pembanding[]" class="input"
placeholder="Longitude"> placeholder="Longitude" pattern="^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$">
</div> </div>
</td> </td>
</tr> </tr>

View File

@@ -1,6 +1,6 @@
<div class="card-header bg-agi-50"> <div class="card-header bg-agi-50">
<h3 class="card-title">Data Pembanding</h3> <h3 class="card-title">Data Pembanding</h3>
<div class="flex items-center gap-2"> <div class="flex gap-2 items-center">
@if (Request::is('penilai/show-data-pembanding/*/edit') && request()->has('documentId') && request()->has('jenis_jaminan')) @if (Request::is('penilai/show-data-pembanding/*/edit') && request()->has('documentId') && request()->has('jenis_jaminan'))
<a href="{{ url()->previous() }}" class="btn btn-xs btn-info"> <a href="{{ url()->previous() }}" class="btn btn-xs btn-info">
<i class="ki-filled ki-exit-left"></i> Back <i class="ki-filled ki-exit-left"></i> Back
@@ -14,11 +14,11 @@
</div> </div>
</div> </div>
<div class="card-header bg-agi-50 py-5 flex-wrap flex justify-end"> <div class="flex flex-wrap justify-end py-5 card-header bg-agi-50">
<button type="button" id="addColumnBtn" class="btn btn-primary btn-sm"> <button type="button" id="addColumnBtn" class="btn btn-primary btn-sm">
<i class="ki-filled ki-plus"></i> Tambah Pembanding <i class="ki-filled ki-plus"></i> Tambah Pembanding
</button> </button>
<button type="button" id="removeColumnBtn" class="btn btn-danger btn-sm ml-2" style="display: none;"> <button type="button" id="removeColumnBtn" class="ml-2 btn btn-danger btn-sm" style="display: none;">
<i class="ki-filled ki-minus"></i> Hapus Pembanding <i class="ki-filled ki-minus"></i> Hapus Pembanding
</button> </button>
</div> </div>
@@ -29,8 +29,8 @@
<div class="card-body"> <div class="card-body">
<div class="scrollable-x-auto"> <div class="scrollable-x-auto">
<table id="dataTable" class="table table-auto table-border align-middle text-gray-700 font-medium text-sm"> <table id="dataTable" class="table text-sm font-medium text-gray-700 align-middle table-auto table-border">
<thead class="bg-gray-50 sticky top-0"> <thead class="sticky top-0 bg-gray-50">
<tr> <tr>
<th class="px-4 py-3 min-w-[200px]">Parameter</th> <th class="px-4 py-3 min-w-[200px]">Parameter</th>
<th class="px-4 py-3 min-w-[250px]">Objek Penilaian</th> <th class="px-4 py-3 min-w-[250px]">Objek Penilaian</th>
@@ -128,12 +128,12 @@
@endphp @endphp
<td class="px-4 py-2"> <td class="px-4 py-2">
<input type="text" name="luas_tanah" class="input " <input type="text" name="luas_tanah" class="input"
value="{{ $inspectionData['tanah']['luas_tanah']['sesuai'] ?? ($inspectionData['tanah']['luas_tanah']['tidak sesuai'] ?? '') }}"> value="{{ $inspectionData['tanah']['luas_tanah']['sesuai'] ?? ($inspectionData['tanah']['luas_tanah']['tidak sesuai'] ?? '') }}">
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<input type="text" name="luas_tanah_pembanding[]" class="input "> <input type="text" name="luas_tanah_pembanding[]" class="input">
</td> </td>
</tr> </tr>
@@ -160,7 +160,7 @@
value="{{ $inspectionData['bangunan']['luas_tanah_bagunan']['sesuai'] ?? ($inspectionData['bangunan']['luas_tanah_bagunan']['tidak sesuai'] ?? '') }}"> value="{{ $inspectionData['bangunan']['luas_tanah_bagunan']['sesuai'] ?? ($inspectionData['bangunan']['luas_tanah_bagunan']['tidak sesuai'] ?? '') }}">
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<input type="text" name="luas_bangunan_pembanding[]" class="input "> <input type="text" name="luas_bangunan_pembanding[]" class="input">
</td> </td>
</tr> </tr>
@@ -186,7 +186,7 @@
<td class="px-4 py-2"> <td class="px-4 py-2">
<input type="text" name="penawaran" class="input" <input type="text" name="penawaran" class="input"
value="{{ $inspectionData['asset']['penawaran'] ?? '' }}"> --}} value="{{ $inspectionData['asset']['penawaran'] ?? '' }}"> --}}
{{-- <select class="input w-full" name="penawaran"> {{-- <select class="w-full input" name="penawaran">
<option value="">Pilih</option> <option value="">Pilih</option>
<option value="Penawaran" {{ (isset($inspectionData['asset']['penawaran']) && $inspectionData['asset']['penawaran'] == 'Penawaran') ? 'selected' : '' }}>Penawaran</option> <option value="Penawaran" {{ (isset($inspectionData['asset']['penawaran']) && $inspectionData['asset']['penawaran'] == 'Penawaran') ? 'selected' : '' }}>Penawaran</option>
<option value="Transaksi" {{ (isset($inspectionData['asset']['penawaran']) && $inspectionData['asset']['penawaran'] == 'Transaksi') ? 'selected' : '' }}>Transaksi</option> <option value="Transaksi" {{ (isset($inspectionData['asset']['penawaran']) && $inspectionData['asset']['penawaran'] == 'Transaksi') ? 'selected' : '' }}>Transaksi</option>
@@ -194,7 +194,7 @@
{{-- </td> {{-- </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<input type="text" name="penawaran_pembanding[]" class="input"> --}} <input type="text" name="penawaran_pembanding[]" class="input"> --}}
{{-- <select class="input w-full" name="penawaran_pembanding[]"> {{-- <select class="w-full input" name="penawaran_pembanding[]">
<option value="">Pilih</option> <option value="">Pilih</option>
<option value="Penawaran" {{ (isset($inspectionData['penawaran']) && $inspectionData['penawaran'] == 'Penawaran') ? 'selected' : '' }}>Penawaran</option> <option value="Penawaran" {{ (isset($inspectionData['penawaran']) && $inspectionData['penawaran'] == 'Penawaran') ? 'selected' : '' }}>Penawaran</option>
<option value="Transaksi" {{ (isset($inspectionData['penawaran']) && $inspectionData['penawaran'] == 'Transaksi') ? 'selected' : '' }}>Transaksi</option> <option value="Transaksi" {{ (isset($inspectionData['penawaran']) && $inspectionData['penawaran'] == 'Transaksi') ? 'selected' : '' }}>Transaksi</option>
@@ -267,17 +267,17 @@
<td class="px-4 py-2"> <td class="px-4 py-2">
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
<input type="text" name="kordinat_lat" class="input" placeholder="Latitude" <input type="text" name="kordinat_lat" class="input" placeholder="Latitude"
value="{{ $inspectionData['asset']['kordinat_lat'] ?? '' }}" pattern="^-?((1[0-7]\d|\d{1,2})(\.\d+)?|180(\.0+)?)$"> value="{{ $inspectionData['asset']['kordinat_lat'] ?? '' }}" pattern="^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$">
<input type="text" name="kordinat_lng" class="input" placeholder="Longitude" <input type="text" name="kordinat_lng" class="input" placeholder="Longitude"
value="{{ $inspectionData['asset']['kordinat_lng'] ?? '' }}" pattern="^-?((1[0-7]\d|\d{1,2})(\.\d+)?|180(\.0+)?)$"> value="{{ $inspectionData['asset']['kordinat_lng'] ?? '' }}" pattern="^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$">
</div> </div>
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
<input type="text" name="kordinat_lat_pembanding[]" class="input" <input type="text" name="kordinat_lat_pembanding[]" class="input"
placeholder="Latitude" pattern="^-?((1[0-7]\d|\d{1,2})(\.\d+)?|180(\.0+)?)$"> placeholder="Latitude" pattern="^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$">
<input type="text" name="kordinat_lng_pembanding[]" class="input" <input type="text" name="kordinat_lng_pembanding[]" class="input"
placeholder="Longitude" pattern="^-?((1[0-7]\d|\d{1,2})(\.\d+)?|180(\.0+)?)$"> placeholder="Longitude" pattern="^-?(1[0-7]?\d(\.\d+)?|180(\.0+)?|[1-9]?\d(\.\d+)?)$">
</div> </div>
</td> </td>
</tr> </tr>
@@ -290,17 +290,17 @@
: 'tidak sesuai'; : 'tidak sesuai';
$address = $inspectionData['asset']['alamat'][$statusAlamat]['address'] ?? null; $address = $inspectionData['asset']['alamat'][$statusAlamat]['address'] ?? null;
@endphp @endphp
<textarea name="address" class="input py-2" rows="2">{{ $address }}</textarea> <textarea name="address" class="py-2 input" rows="2">{{ $address }}</textarea>
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<textarea name="address_pembanding[]" class="input py-2" rows="2"></textarea> <textarea name="address_pembanding[]" class="py-2 input" rows="2"></textarea>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="px-4 py-2">Provinsi</td> <td class="px-4 py-2">Provinsi</td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="province_code" name="province_code" class="input w-full"> <select id="province_code" name="province_code" class="w-full input">
@php @php
$statusKey = isset($inspectionData['asset']['alamat']['sesuai']) $statusKey = isset($inspectionData['asset']['alamat']['sesuai'])
? 'sesuai' ? 'sesuai'
@@ -326,7 +326,7 @@
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="province_code_pembanding" name="province_code_pembanding[]" <select id="province_code_pembanding" name="province_code_pembanding[]"
onchange="handleProvinceChange(this)" class="input w-full"> onchange="handleProvinceChange(this)" class="w-full input">
<option value="">Pilih Provinsi</option> <option value="">Pilih Provinsi</option>
@foreach ($provinces as $province) @foreach ($provinces as $province)
<option value="{{ $province->code }}">{{ $province->name }} <option value="{{ $province->code }}">{{ $province->name }}
@@ -339,7 +339,7 @@
<tr> <tr>
<td class="px-4 py-2">Kabupaten/Kota</td> <td class="px-4 py-2">Kabupaten/Kota</td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="city_code" name="city_code" class="select w-full"> <select id="city_code" name="city_code" class="w-full select">
@php @php
$statusKey = isset($inspectionData['asset']['alamat']['sesuai']) $statusKey = isset($inspectionData['asset']['alamat']['sesuai'])
@@ -360,7 +360,7 @@
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="city_code_pembanding" name="city_code_pembanding[]" <select id="city_code_pembanding" name="city_code_pembanding[]"
onchange="handleCityChange(this)" class="input w-full"> onchange="handleCityChange(this)" class="w-full input">
<option value="">Pilih Kota/Kabupaten</option> <option value="">Pilih Kota/Kabupaten</option>
</select> </select>
</td> </td>
@@ -369,7 +369,7 @@
<tr> <tr>
<td class="px-4 py-2">Kecamatan</td> <td class="px-4 py-2">Kecamatan</td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="district_code" name="district_code" class="select w-full"> <select id="district_code" name="district_code" class="w-full select">
@php @php
$statusKey = isset($inspectionData['asset']['alamat']['sesuai']) $statusKey = isset($inspectionData['asset']['alamat']['sesuai'])
@@ -392,7 +392,7 @@
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="district_code_pembanding" name="district_code_pembanding[]" <select id="district_code_pembanding" name="district_code_pembanding[]"
onchange="handleDistrictChange(this)" class="input w-full"> onchange="handleDistrictChange(this)" class="w-full input">
<option value="">Pilih Kecamatan</option> <option value="">Pilih Kecamatan</option>
</select> </select>
</td> </td>
@@ -401,7 +401,7 @@
<tr> <tr>
<td class="px-4 py-2">Desa/Kelurahan</td> <td class="px-4 py-2">Desa/Kelurahan</td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="village_code" name="village_code" class="select w-full"> <select id="village_code" name="village_code" class="w-full select">
@php @php
$statusKey = isset($inspectionData['asset']['alamat']['sesuai']) $statusKey = isset($inspectionData['asset']['alamat']['sesuai'])
? 'sesuai' ? 'sesuai'
@@ -420,7 +420,7 @@
</select> </select>
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="village_code_pembanding" name="village_code_pembanding[]" class="input w-full"> <select id="village_code_pembanding" name="village_code_pembanding[]" class="w-full input">
<option value="">Pilih Desa/Kelurahan</option> <option value="">Pilih Desa/Kelurahan</option>
</select> </select>
</td> </td>
@@ -444,7 +444,7 @@
<td class="px-4 py-2">Diskon</td> <td class="px-4 py-2">Diskon</td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<div class="input"> <div class="input">
<input type="text" name="diskon" class=" currency" <input type="text" name="diskon" class="currency"
value="{{ $inspectionData['asset']['diskon'] ?? '' }}"> value="{{ $inspectionData['asset']['diskon'] ?? '' }}">
<span class="btn btn-icon"> <span class="btn btn-icon">
<i class="ki-outline ki-percentage"></i> <i class="ki-outline ki-percentage"></i>
@@ -452,7 +452,7 @@
</div> </div>
</td> </td>
<td class=" px-4 py-2"> <td class="px-4 py-2">
<div class="input"> <div class="input">
<input type="text" name="diskon_pembanding[]" class="currency"> <input type="text" name="diskon_pembanding[]" class="currency">
<span class="btn btn-icon"> <span class="btn btn-icon">