daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tambahkan validasi form untuk data debitur

Browse Source 
- 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.
This commit is contained in:
Daeng Deni Mardaeni
2024-12-25 07:52:19 +07:00
parent 98f6e9cf3c
commit c15e08e7c5
1 changed files with 153 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
resources/views/debitur/components/debitur.blade.php
View File

@@ -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