116 lines
4.6 KiB
JavaScript
116 lines
4.6 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const form = document.querySelector('form[action="checkout_handler.php"]');
|
|
if (!form) return;
|
|
|
|
const requiredFields = form.querySelectorAll('[required]');
|
|
|
|
const validateField = (field) => {
|
|
const errorContainer = field.parentElement.querySelector('.invalid-feedback');
|
|
if (!errorContainer) return;
|
|
|
|
let isValid = true;
|
|
let errorMessage = '';
|
|
|
|
if (field.value.trim() === '') {
|
|
isValid = false;
|
|
errorMessage = 'این فیلد نمیتواند خالی باشد.';
|
|
} else if (field.type === 'email' && field.value.trim() !== '' && !/^[\S]+@[\S]+\.[\S]+$/.test(field.value)) {
|
|
isValid = false;
|
|
errorMessage = 'لطفاً یک ایمیل معتبر وارد کنید.';
|
|
}
|
|
|
|
if (!isValid) {
|
|
field.classList.add('is-invalid');
|
|
errorContainer.textContent = errorMessage;
|
|
errorContainer.style.display = 'block';
|
|
} else {
|
|
field.classList.remove('is-invalid');
|
|
errorContainer.style.display = 'none';
|
|
}
|
|
return isValid;
|
|
};
|
|
|
|
requiredFields.forEach(field => {
|
|
// Create a container for the error message if it doesn't exist
|
|
let errorContainer = field.parentElement.querySelector('.invalid-feedback');
|
|
if (!errorContainer) {
|
|
errorContainer = document.createElement('div');
|
|
errorContainer.className = 'invalid-feedback';
|
|
// Insert after the input field
|
|
field.parentNode.insertBefore(errorContainer, field.nextSibling);
|
|
}
|
|
|
|
field.addEventListener('blur', () => {
|
|
validateField(field);
|
|
});
|
|
|
|
// Also validate on input to give immediate feedback
|
|
field.addEventListener('input', () => {
|
|
// Only remove error, don't show it while typing
|
|
if (field.classList.contains('is-invalid')) {
|
|
validateField(field);
|
|
}
|
|
});
|
|
});
|
|
|
|
form.addEventListener('submit', function (event) {
|
|
let isFormValid = true;
|
|
requiredFields.forEach(field => {
|
|
if (!validateField(field)) {
|
|
isFormValid = false;
|
|
}
|
|
});
|
|
|
|
if (!isFormValid) {
|
|
event.preventDefault(); // Stop form submission
|
|
// Find the first invalid field and focus it for better UX
|
|
const firstInvalidField = form.querySelector('.is-invalid');
|
|
if(firstInvalidField) {
|
|
firstInvalidField.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Handle address selection logic from the original file
|
|
const savedAddressSelect = document.getElementById('saved_address');
|
|
if (savedAddressSelect) {
|
|
savedAddressSelect.addEventListener('change', function() {
|
|
// Clear all fields first
|
|
document.getElementById('first_name').value = '';
|
|
document.getElementById('last_name').value = '';
|
|
document.getElementById('phone_number').value = '';
|
|
document.getElementById('province').value = '';
|
|
document.getElementById('city').value = '';
|
|
document.getElementById('address_line').value = '';
|
|
document.getElementById('postal_code').value = '';
|
|
|
|
// Clear validation states
|
|
requiredFields.forEach(field => {
|
|
field.classList.remove('is-invalid');
|
|
const errorContainer = field.parentElement.querySelector('.invalid-feedback');
|
|
if(errorContainer) errorContainer.style.display = 'none';
|
|
});
|
|
|
|
if (this.value) {
|
|
try {
|
|
const address = JSON.parse(this.value);
|
|
document.getElementById('first_name').value = address.first_name || '';
|
|
document.getElementById('last_name').value = address.last_name || '';
|
|
document.getElementById('phone_number').value = address.phone_number || '';
|
|
document.getElementById('province').value = address.province || '';
|
|
document.getElementById('city').value = address.city || '';
|
|
document.getElementById('address_line').value = address.address_line || '';
|
|
document.getElementById('postal_code').value = address.postal_code || '';
|
|
|
|
// Re-validate all fields after filling them
|
|
requiredFields.forEach(field => validateField(field));
|
|
|
|
} catch (e) {
|
|
console.error("Failed to parse address JSON:", e);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|