Abholung & Rückgabe

Abholdatum

Abholzeit

Rückgabedatum

Rückgabezeit

Bitte wähle dein Schutzpaket

Bitte wählen Sie ein Schutzpaket (Pflichtfeld):

Basic-Schutz (im Preis inkludiert) Smart-Schutz (€20/Tag) Premium-Schutz (€40/Tag)

Bitte wählen Sie ein Schutzpaket.

Extras

Storno-Schutz (€10/Buchung) Hol- und Bringservice (Preis auf Anfrage)

Persönliche Daten

Vorname

Nachname

Geburtsdatum

Land Bitte wählenÖsterreichDeutschlandSchweiz

PLZ

Ort

Straße

Telefon

E-Mail

Anmerkungen

Führerschein und Lichtbildausweis hochladen (Pflichtfeld)

Erlaubte Formate: JPG, PNG, PDF (min. 2 Dateien, max. 5MB)

Ich bestätige, dass ich die AGB und Datenschutzerklärung gelesen habe und mit ihrem Inhalt einverstanden bin.

Reservierung anfragen

document.addEventListener('DOMContentLoaded', function() { const form = document.querySelector('.funcar-form'); const fileInput = document.getElementById('drivers_license'); // Style untuk error message const style = document.createElement('style'); style.textContent = ` .field-error { color: #e53935; font-size: 13px; margin-top: 6px; display: block; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .error-border { border: 2px solid #e53935 !important; background-color: #ffebee !important; } .error-label { color: #e53935 !important; } `; document.head.appendChild(style); // Fungsi untuk clear error function clearError(field) { field.classList.remove('error-border'); const errorMsg = field.parentElement.querySelector('.field-error'); if (errorMsg && !errorMsg.id.includes('schutz') && !errorMsg.id.includes('file')) { errorMsg.remove(); } const label = field.parentElement.querySelector('label'); if (label) { label.classList.remove('error-label'); } } // Fungsi untuk show error function showError(field, message) { clearError(field); field.classList.add('error-border'); const label = field.parentElement.querySelector('label'); if (label) { label.classList.add('error-label'); } // Cek apakah error message sudah ada let errorDiv = field.parentElement.querySelector('.field-error'); if (!errorDiv || (!errorDiv.id.includes('schutz') && !errorDiv.id.includes('file'))) { errorDiv = document.createElement('div'); errorDiv.className = 'field-error'; errorDiv.textContent = message; field.parentElement.appendChild(errorDiv); } } // Validasi file upload function validateFiles() { const files = fileInput.files; const fileError = document.getElementById('file-error'); if (files.length < 2) { fileError.textContent = 'Bitte mindestens 2 Dateien hochladen'; fileError.style.display = 'block'; fileInput.classList.add('error-border'); return false; } for (let file of files) { if (file.size > 5 * 1024 * 1024) { fileError.textContent = 'Dateigröße darf 5MB nicht überschreiten'; fileError.style.display = 'block'; fileInput.classList.add('error-border'); return false; } } fileError.style.display = 'none'; fileInput.classList.remove('error-border'); return true; } // Validasi Schutzpaket function validateSchutzpaket() { const radios = document.querySelectorAll('.schutz-radio-trans'); const schutzError = document.getElementById('schutz-error'); const isChecked = Array.from(radios).some(radio => radio.checked); if (!isChecked) { schutzError.style.display = 'block'; radios[0].parentElement.parentElement.classList.add('error-border'); return false; } schutzError.style.display = 'none'; radios[0].parentElement.parentElement.classList.remove('error-border'); return true; } // Live validation saat user mengisi const inputs = form.querySelectorAll('input[required], select[required], textarea[required]'); inputs.forEach(input => { input.addEventListener('blur', function() { if (this.value.trim() === '') { showError(this, 'Dieses Feld ist erforderlich'); } else { clearError(this); } }); input.addEventListener('input', function() { if (this.value.trim() !== '') { clearError(this); } }); }); // Live validation untuk file upload if (fileInput) { fileInput.addEventListener('change', validateFiles); } // Live validation untuk Schutzpaket const schutzRadios = document.querySelectorAll('.schutz-radio-trans'); schutzRadios.forEach(radio => { radio.addEventListener('change', validateSchutzpaket); }); // Validasi saat submit form.addEventListener('submit', function(e) { let isValid = true; let firstError = null; // Clear semua error sebelumnya document.querySelectorAll('.field-error').forEach(err => { if (!err.id.includes('schutz') && !err.id.includes('file')) { err.remove(); } }); document.querySelectorAll('.error-border').forEach(el => el.classList.remove('error-border')); document.querySelectorAll('.error-label').forEach(el => el.classList.remove('error-label')); // Validasi required fields const requiredFields = form.querySelectorAll('input[required], select[required], textarea[required]'); requiredFields.forEach(field => { // Skip file input dan radio (dihandle terpisah) if (field.type === 'file' || field.type === 'radio') return; if (field.type === 'checkbox') { if (!field.checked) { showError(field, 'Bitte akzeptieren Sie die Bedingungen'); if (!firstError) firstError = field; isValid = false; } } else if (field.value.trim() === '') { showError(field, 'Dieses Feld ist erforderlich'); if (!firstError) firstError = field; isValid = false; } }); // Validasi Schutzpaket if (!validateSchutzpaket()) { if (!firstError) firstError = document.querySelector('.schutz-radio-trans'); isValid = false; } // Validasi file upload if (!validateFiles()) { if (!firstError) firstError = fileInput; isValid = false; } // Jika ada error, prevent submit dan scroll ke error pertama if (!isValid) { e.preventDefault(); if (firstError) { // Smooth scroll ke error pertama firstError.scrollIntoView({ behavior: 'smooth', block: 'center' }); // Focus ke field (kecuali file input) if (firstError.type !== 'file') { setTimeout(() => { firstError.focus(); }, 500); } // Tampilkan toast notification (opsional) showToast('Bitte füllen Sie alle Pflichtfelder aus'); } } }); // Toast notification (opsional tapi bagus buat UX mobile) function showToast(message) { // Cek apakah toast sudah ada let toast = document.getElementById('form-toast'); if (!toast) { toast = document.createElement('div'); toast.id = 'form-toast'; toast.style.cssText = ` position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #323232; color: white; padding: 12px 24px; border-radius: 4px; font-size: 14px; z-index: 9999; opacity: 0; transition: opacity 0.3s ease; max-width: 90%; text-align: center; `; document.body.appendChild(toast); } toast.textContent = message; toast.style.opacity = '1'; setTimeout(() => { toast.style.opacity = '0'; }, 3000); } });